Switch

Base UICopy Anchor Link

Switch maps a boolean setting to a sliding toggle. Checked state, disabled, and change handlers pass through Base UI; label, description, and error use the same field-row layout as Checkbox and Radio.

Unlike those controls, Switch already owns its Field.Root. Pass name, invalid, and validation props on Switch itself; do not wrap it in another field root. size scales the track and label (s by default, or m).

When to useCopy Anchor Link

• A setting that should apply as soon as the thumb moves (notifications, feature flags, effects)
• Preference rows where each toggle is independent and labeled

When not to useCopy Anchor Link

• The boolean ships with a larger form submit → Checkbox
• Exactly one choice from a set → Radio
• A pressed toolbar control that may swap icons → ToggleButton

RelatedCopy Anchor Link

• Checkbox — form-batch and multi-select booleans
• Radio — mutually exclusive options
• ToggleButton — pressed-state toolbar toggles

Common examplesCopy Anchor Link

Preferences rowsCopy Anchor Link

A bordered Surface with stacked labeled Switches is the default settings panel. Each row keeps its own label / description; the change takes effect as soon as the thumb moves.

Surface cardCopy Anchor Link

hPadding / vPadding let the control fill a bordered Surface. Drive Surface color from checked state when the whole card should read as on.

Trailing controlCopy Anchor Link

When copy lives outside the control — a title stack on the left, power toggle on the right — use a row Stack with hAlign="space-between". An unlabeled Switch needs aria-label.

Ask your agentCopy Anchor Link

Build a notifications settings card with three toggles: Push notifications, Email digests, and Marketing. Each row gets a short label and muted description; changes should apply immediately.