Back to Components

Form

Switch

Sliding on/off control — the macOS-Settings shape. Use for setting toggles where Toggle's button shape would feel too noisy.

Examples

Default + Settings list

Notifications
Auto-update
<Switch bind:checked={notifications} label="Notifications" />
<Switch bind:checked={autoUpdate} label="Auto-update" />

Sizes

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

Disabled

<Switch disabled />

Props

PropTypeDefaultDescription
checkedbooleanfalseBindable on/off state. Use bind:checked.
onCheckedChange(next: boolean) => voidControlled-pattern callback.
size'sm' | 'md''md'Track / thumb dimension tier.
labelstringAccessible label (sets aria-label since the visual is icon-only).
disabledbooleanfalseNative disabled state.

Install

CLI

npx @a3tai/mittsu add switch