Switch

Switches allow users to toggle between two states, typically on and off. Built on top of Radix UI primitives for accessibility.

Basic Usage

import { Switch } from '@/components'

<Switch id="airplane-mode" />
<label htmlFor="airplane-mode">Airplane Mode</label>

States

Switches support two states: unchecked (off) and checked (on).

Unchecked

<Switch />

Checked

<Switch checked />

Sizes

Switches come in two sizes: small and medium (default).

<Switch size="sm" />
<Switch size="md" />

Disabled

Disabled switches cannot be interacted with and display a muted appearance.

<Switch disabled />
<Switch disabled checked />

Error Variant

Use the error variant to indicate validation errors or required fields.

<Switch variant="error" />
<Switch variant="error" checked />

With Labels

Switches are commonly used with labels to provide context.

<div className="flex items-center justify-between">
  <div>
    <label htmlFor="notifications">Enable notifications</label>
    <p>Receive alerts about important updates</p>
  </div>
  <Switch id="notifications" />
</div>

Controlled

You can control the switch state externally using the checked and onCheckedChange props.

const [checked, setChecked] = useState(false)

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

All States Overview

Accessibility

• Built on Radix UI Switch primitive for robust accessibility
• Full keyboard support (Space to toggle)
• Proper ARIA attributes for screen readers
• Supports aria-label and aria-labelledby for labeling
• Focus states are clearly visible

API Reference

Switch Props