Chapter 32: Switch

Core Idea

A binary toggle control (visually a switch, not a checkbox) — API-wise a simpler sibling of Checkbox, without the tri-state/indeterminate option.

Key Concepts

• Anatomy: Root → Thumb (the visual indicator that slides between positions).
• Two-state only: checked/defaultChecked are plain boolean (unlike Checkbox's boolean | "indeterminate").
• Form compatibility: renders a hidden native input automatically, same as Checkbox/RadioGroup.
• unstable_Provider/unstable_Trigger/unstable_BubbleInput: same lower-level decoupling parts as Checkbox, for recomposing or excluding the hidden input.

Key Takeaways

1. Choose Switch over Checkbox when the setting is an immediate on/off toggle (e.g. a settings page); choose Checkbox for form-submission-style selections or when a third indeterminate state matters.
2. Visually a switch, but semantically still built on the same checked/unchecked ARIA model as Checkbox under the hood.
3. Same unstable_* decoupling escape hatch as Checkbox if you need to move or exclude the hidden form input.

Connects To

• Checkbox: the tri-state sibling with a near-identical API shape.