Switch

uistable

Switch — extracted 1:1 from WEM-App.

npx shadcn add @krawma/switch

npm: radix-ui@^1.6.1 · registry: @krawma/utils

Preview

States

checkeduncheckeddisabledfocus-visible

Keyboard

SpaceEnter

Depends on

utils

Purpose

An on/off toggle for a setting that applies immediately (no separate save) — e.g. "Enable notifications". For a choice confirmed on submit, use checkbox.

Anatomy

A Radix Switch (role="switch") with a sliding thumb. Pair with a Label.

Style

No variants. Checked track uses --primary; token-backed thumb.

Behavior & functionality

Controlled (checked + onCheckedChange) or uncontrolled (defaultChecked). Changing it should take effect right away.

Accessibility

Role switch; toggles with Space/Enter; needs a Label or aria-label.
Honor disabled and visible focus-visible. State is conveyed via aria-checked, not color alone.

Do / Don't

✅ Use for instantly-applied settings.
❌ Don't use inside a form that batches changes for a submit — use checkbox.