Switch
Binary toggle controls. Used to instantly switch between two states, usually "on" and "off".
Usage
Use Switches for settings that take effect immediately. They are more interactive than checkboxes and usually represent a system-level configuration (e.g., Airplane Mode, Dark Mode).
Content
Notification Settings
Toggling global notifications.
Spec
- Primitive: Built on `@radix-ui/react-switch`.
- Checked State: Background Brand Primary (#D74D0F).
- Unchecked State: Background #E5E5E5.
- Thumb: Solid White, 20px diameter, elevation shadow.
- Animation: Smooth 200ms transition for both color and position.
Anatomy
SWITCH PRIMITIVE