Switch

Usage

import { Switch } from '@jamie/ui/switch'
 
export function SwitchDemo() {
  return <Switch defaultChecked />
}

With Label

Pair switches with labels for accessible form controls. Use disabled to prevent interaction.

Auto-record meetings

Send email recaps

Extract action items

import { Label } from '@jamie/ui/label'
import { Switch } from '@jamie/ui/switch'
 
export function SwitchWithLabelDemo() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Switch id="auto-record" defaultChecked />
        <Label htmlFor="auto-record">Auto-record meetings</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="email-recap" />
        <Label htmlFor="email-recap">Send email recaps</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="action-items" disabled />
        <Label htmlFor="action-items" className="text-muted-foreground">
          Extract action items
        </Label>
      </div>
    </div>
  )
}

Sizes

Use size="sm" for a compact switch.

Default

Small

import { Label } from '@jamie/ui/label'
import { Switch } from '@jamie/ui/switch'
 
export function SwitchSizesDemo() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Switch id="size-default" size="default" defaultChecked />
        <Label htmlFor="size-default">Default</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="size-sm" size="sm" defaultChecked />
        <Label htmlFor="size-sm">Small</Label>
      </div>
    </div>
  )
}