Switch

Two-state toggle for settings that take effect immediately. Checked uses flat Lilac primary; unchecked uses muted.

Default

<div className="flex items-center gap-3">
  <Switch id="airplane" />
  <Label htmlFor="airplane">Airplane mode</Label>
</div>

Sizes

<Switch defaultChecked />
<Switch defaultChecked />

Disabled

<Switch disabled />
<Switch disabled defaultChecked />

Props

PropType / note
size"sm" | "md" (default "md")
checkedboolean — controlled
defaultCheckedboolean — uncontrolled initial state
onCheckedChange(checked: boolean) => void
disabledboolean
required / name / valueStandard form props (via Radix)

Source

packages/react/src/components/switch.tsx · Figma node 2819:30733