Switch

A toggle switch for binary on/off states.

Basic Usage

Enable notifications

Variants

Primary

Secondary

Sizes

Small

Medium

Large

Disabled

Disabled off

Disabled on

Mobile considerations

• Switch knob slides with the Pattern D layout-shift transition (var(--tui-duration-base) + var(--tui-ease-in-out)) — symmetric so on/off feel balanced.
• Tap target is at minimum 44×44px on size="md" and "lg". For size="sm", embed inside a row that hits 44px on its own.
• Switch is the right primitive for settings (instant apply). For form submission flows, use a Checkbox so changes are explicit on submit.

Props

Prop	Type	Default	Description
checked	boolean	-	Whether the switch is on (controlled)
defaultChecked	boolean	false	Initial state (uncontrolled)
onChange	(checked: boolean) => void	-	Callback when the switch is toggled
variant	'primary' | 'secondary'	'primary'	Color variant
size	'sm' | 'md' | 'lg'	'md'	Size of the switch
label	string	-	Text label
required	boolean	false	Whether the field is required (shows red asterisk)
disabled	boolean	false	Whether the switch is disabled
className	string	-	Additional CSS class
style	CSSProperties	-	Inline styles