Switch

A styled toggle switch built on Base UI's Switch primitive. It supports two sizes and renders a sliding thumb that transitions between checked and unchecked states.

Airplane Mode

import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

export default function SwitchDemo() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

Anatomy

import { Switch } from "@/components/ui/switch"

<Switch />

Examples

Basic switch

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

Small size

Pass size="sm" for a more compact switch.

<div className="flex items-center gap-2">
  <Switch id="compact" size="sm" />
  <Label htmlFor="compact">Compact</Label>
</div>

Controlled

const [checked, setChecked] = React.useState(false)

<Switch checked={checked} onCheckedChange={setChecked} />

Disabled

<Switch disabled />

API Reference

Switch

The root switch component. Renders a button with a sliding thumb.

Prop	Type	Default	Description
`size`	`"sm" \| "default"`	`"default"`	The switch size. `"default"` is 32x18px, `"sm"` is 24x14px.
`checked`	`boolean`	—	The controlled checked state.
`defaultChecked`	`boolean`	—	The initial uncontrolled checked state.
`onCheckedChange`	`(checked: boolean) => void`	—	Callback when the checked state changes.
`disabled`	`boolean`	`false`	Whether the switch is disabled.
`className`	`string`	—

Accepts all props from Base UI's Switch.Root.