Switch

The Switch component provides a visual toggle between two mutually exclusive states. It's typically used for enabling or disabling a feature or setting with immediate effect.

Switch is best for settings that take effect immediately. Use Checkbox for form submissions.

Features

Clear visual state indication
Smooth transition animation
Controlled and uncontrolled modes
Keyboard accessible (Space/Enter to toggle)
Form integration with hidden input
Disabled state support

Usage

import { Switch } from '@loke/design-system/switch';
import { Label } from '@loke/design-system/label';

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

Tips:

Always provide a label for accessibility.
Use for immediate-effect settings, not form submissions.
Consider using defaultChecked for uncontrolled usage.

Props

Switch

Prop

Type

Examples

Basic switch

<Switch />

With label

Enable notifications

<div className="flex items-center space-x-2">
  <Switch id="notifications" />
  <Label htmlFor="notifications">Enable notifications</Label>
</div>

Controlled switch

Disabled

Switch is off

const [enabled, setEnabled] = useState(false);

<div className="flex items-center space-x-2">
  <Switch
    checked={enabled}
    onCheckedChange={setEnabled}
    id="controlled"
  />
  <Label htmlFor="controlled">
    {enabled ? "Enabled" : "Disabled"}
  </Label>
</div>

Disabled states

Disabled (off)

Disabled (on)

<div className="flex items-center space-x-2">
  <Switch disabled id="disabled-off" />
  <Label htmlFor="disabled-off" className="opacity-50">
    Disabled (off)
  </Label>
</div>

<div className="flex items-center space-x-2">
  <Switch defaultChecked disabled id="disabled-on" />
  <Label htmlFor="disabled-on" className="opacity-50">
    Disabled (on)
  </Label>
</div>

In a form

<form className="space-y-4">
  <div className="flex items-center justify-between">
    <div>
      <Label htmlFor="marketing">Marketing emails</Label>
      <p className="text-sm text-muted-foreground">
        Receive emails about new products.
      </p>
    </div>
    <Switch id="marketing" name="marketing" />
  </div>
  <div className="flex items-center justify-between">
    <div>
      <Label htmlFor="security">Security alerts</Label>
      <p className="text-sm text-muted-foreground">
        Get notified about security updates.
      </p>
    </div>
    <Switch defaultChecked id="security" name="security" />
  </div>
</form>

Accessibility

Uses role="switch" with aria-checked state.
Space and Enter keys toggle the switch.
Focus is clearly visible with ring indicator.
Disabled state is communicated via aria-disabled.
Hidden checkbox input for form compatibility.
Always pair with a Label for screen reader support.

Best practices

Use switches for settings with immediate effect.
Always provide a clear label describing the setting.
Position labels consistently (left or right of switch).
Consider adding descriptive text for complex settings.
Use defaultChecked for preferred initial states.
Group related switches together in settings panels.
Avoid using switches for actions that require confirmation.
Use Checkbox instead for form submissions or multi-select.

Switch

On this page