Switch

Switches toggle settings on or off and imply immediate effect. Hover uses the same 3px outer ring as Checkbox (#BFD6FE default, translucent red when error). Error forces an off-state track until resolved.

States

Off, on, disabled, error

Hover interactive switches to see the halo. Disabled never hovers.

Off

Email notifications

Disabled off

Archived workspace

Disabled on

Archived workspace

Error

Accept termsRequired before continuing.

Turn this on to accept the terms.

Sizes

Small, default, large

Small

Small switch

Default

Default switch

Large

Large switch

Structure

Anatomy

Track

Pill-shaped track; #0D65FC when on, #E2E8F0 when off. Error shows white fill with red inset border.

Thumb

White circle; translates with a short motion when toggled.

Hover ring

3px #BFD6FE (default) or rgba(220,38,38,0.22) (error), same vocabulary as Checkbox.

Label & description

Optional copy to the right; error tints label and description red.

Focus

2px focus ring on keyboard focus via the hidden checkbox input.

Usage

Do & Don't

Use for binary settings that apply immediately.
Pair with a concise label; add description for side effects.
Clear error when the user turns the switch on.

Don't

Don't use for multi-select lists — use Checkbox.
Don't rely on hover alone for critical info — add a Tooltip or helper text.