Switch

A toggle switch for binary on/off settings. Built on the @base-ui/react Switch primitive with an animated thumb, expanded click target, and responsive sizing. Best for settings that take immediate effect.

Anatomy

A <Switch> renders a track with an animated thumb that slides between off (left) and on (right). Uses data-slot="switch" and data-slot="switch-thumb". The checked state changes the track color to primary.

data-slot="switch"animated thumbexpanded click target

Examples

Settings list

States

Off

On

Focused

Disabled

Design Guidelines

Do

  • Use for immediate-effect settings. The change should apply instantly, like toggling dark mode or notifications.
  • Place label to the left or above. The switch should be on the trailing edge of a row.
  • Make the on/off state obvious. The visual shift (color + position) should be clear.

Don't

  • Don't use for form submissions. If the change requires a "Save" action, use Checkbox instead.
  • Don't use in groups for multi-select. Multiple switches that look like a group should be independent checkboxes.
  • Don't place without a label. Always provide text describing what the switch controls.

Developer Reference

Accessibility

  • Built on Base UI Switch — manages role="switch" and aria-checked.
  • Focus ring uses focus-visible for keyboard-only display.
  • Responsive sizing: h-[18px] w-[32px] base, sm:h-5 sm:w-9.
  • Thumb animates via translate: translate-x-3.5 on checked.
  • After pseudo-element expands click target: -inset-x-3 -inset-y-2.

Usage

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

// Basic with label
<div className="flex items-center gap-3">
  <Switch id="airplane" />
  <Label htmlFor="airplane">Airplane Mode</Label>
</div>

// Pre-checked
<Switch id="notifications" defaultChecked />

// Disabled
<Switch id="disabled" disabled />

// Controlled
const [enabled, setEnabled] = useState(false)
<Switch checked={enabled} onCheckedChange={setEnabled} />

// Settings row pattern
<div className="flex items-center justify-between">
  <Label htmlFor="darkmode">Dark Mode</Label>
  <Switch id="darkmode" />
</div>