Toggle

Toggles (also known as switches) allow users to turn a single option on or off. Built on top of Radix UI primitives for accessibility.

Basic Usage

import { Toggle } from '@/components'

<Toggle id="notifications" />
<label htmlFor="notifications">Enable notifications</label>

States

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

Off (Unchecked)

<Toggle />

On (Checked)

<Toggle checked />

Disabled

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

<Toggle disabled />
<Toggle disabled checked />

Controlled

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

const [checked, setChecked] = useState(false)

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

With Labels

Toggles work great in settings forms with descriptive labels.

<div className="flex items-center justify-between">
  <div>
    <label htmlFor="marketing">Marketing emails</label>
    <p>Receive emails about new products.</p>
  </div>
  <Toggle id="marketing" />
</div>

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

Toggle Props