Switch

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 />

Relative positioning

When using Switch in custom flex layouts (especially with height constraints like h-full), you may need to add relative positioning to the parent container to ensure proper rendering of focus rings, form validation messages, and overflow.

<div className="relative">
  <FormField_Shadcn_
    control={form.control}
    name="enabled"
    render={({ field }) => (
      <FormControl_Shadcn_>
        <Switch checked={field.value} onCheckedChange={field.onChange} />
      </FormControl_Shadcn_>
    )}
  />
</div>

You don’t need to add relative manually when using FormItemLayout as it provides the necessary positioning context automatically.

Examples

Form