Components

Switch

Immediate on/off toggle for a setting. Applies the change on click, no Save button needed.

Updated Jul 8, 2026 by Leonardo Posada

Basic

<div className="flex items-center gap-3">
  <Switch id="notifs" defaultChecked />
  <Label htmlFor="notifs">Enable notifications</Label>
</div>

States

<Switch />
<Switch defaultChecked />
<Switch disabled />
<Switch disabled defaultChecked />

When to use

  • Settings that apply immediately (notifications, feature flags).
  • Persistent boolean state visible at a glance.

When not to use

  • Requires a Save button — use Checkbox.
  • Multi-select — use a Checkbox group.

Usage

Do
  • Provide instant feedback (toast, inline confirmation) when toggling.
  • Place the label on the left, the switch on the right, aligned with other rows.
  • Use aria-label if there's no visible label.
Don't
  • Don't require an extra Save to persist a Switch change.
  • Don't use Switch for irreversible destructive changes without confirmation.