← All matrices

Switch

Controlled / uncontrolled toggle. State matrix shown via pseudo classes. Knob position keyed off checked via .on modifier.

Source react/src/atoms/Switch.tsx Bundle 1.10 KB min / 0.64 KB gz LOC 64

Checked × State

Variant	Default	Focus	Disabled
off
on

With label + description

State	Render
off	Email notifications Get notified when someone @mentions you.
on	Email notifications Get notified when someone @mentions you.
disabled	SMS notifications Available only on Pro plan.

Props: checked, defaultChecked, onChange(checked), label, description, disabled.
ARIA: role="switch" + aria-checked. forwardRef to button.