Component

Switch

Sliding-thumb toggle for binary state that commits immediately. Built on Radix Switch.

9:41

I'm transferring

Notify me about new DMs

Auto-join Class of 2030

Settings row pattern

Use Switch when toggling commits immediately (no submit step). For multi-select where the user confirms a batch, use Checkbox instead. Track is --muted off / --brand on; thumb is white with a soft shadow and slides via the --ease-emphasized token at 200ms.

Props

Prop	Type	Default	Description
checked	boolean	—	Controlled state.
defaultChecked	boolean	—	Uncontrolled initial state.
onCheckedChange	(checked: boolean) => void	—	Fires when the user toggles the switch.
disabled	boolean	—	Disabled state (50% opacity, no pointer events).
id	string	—	Pair with a <label htmlFor> to make the label a click target.
...RadixSwitchProps	ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>	—	All Radix Switch props are forwarded.