Docs
Switch

Switch

A control that allows the user to toggle between checked and not checked.

This component uses Radix UI
import { Switch } from 'ui'
import { Label_Shadcn_ } from 'ui'
 
export function SwitchDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <Label_Shadcn_ htmlFor="airplane-mode">Airplane Mode</Label_Shadcn_>
    </div>
  )
}

Installation

npx shadcn-ui@latest add switch

Usage

import { Switch } from '@/components/ui/switch'
<Switch />

Examples

Form

Email Notifications

Receive emails about new products, features, and more.
Receive emails about your account security.
PreviousSonner
NextTable