Switch

Atomshadcn/ui, restyled with tokens

Turns one setting on or off, taking effect immediately.

components/atoms/switch.tsx
Use it for
Preferences and settings that save the moment they change.
Not for
A choice that waits for a Submit button. Use a Checkbox.

States

Off / on
Small
With a label
Focused
Disabled

Usage

import { Label } from '@/components/atoms/label';

<div className="flex items-center gap-2">
  <Switch id="digest" checked={digest} onCheckedChange={setDigest} />
  <Label htmlFor="digest">Weekly digest</Label>
</div>

Props

Switch props
PropTypeDefaultDescription
checked / defaultCheckedboolean—On or off, controlled or uncontrolled.
onCheckedChange(checked: boolean) => void—Called on every toggle.
size'sm' | 'md''md'Track and thumb size.
disabledbooleanfalseBlocks changes.

Accessibility

  • Toggled with Space.
  • Announced as a switch that is on or off.