Chapter 41: Switch

Core Idea

A two-state (no indeterminate) on/off toggle — Checkbox's simpler sibling, same <span>-by-default / nativeButton rendering tradeoff and hidden-input form participation.

Key Concepts

• Anatomy: Root → Thumb (the visual sliding knob).
• Labeling: identical patterns to Checkbox (ch016) — wrapping <label>, sibling label + nativeButton render={<button />}, or Field.Label.
• uncheckedValue: same purpose as Checkbox's — the value submitted when off, since native checkbox-like inputs submit nothing when unchecked by default.
• No indeterminate state: unlike Checkbox, Switch is strictly binary — model any "partial" concept at the application level, not through this component.

Reference Tables

Part	Notable props	Notable data attributes
Root	checked/defaultChecked/onCheckedChange, value/uncheckedValue, nativeButton, name/form	data-checked, data-unchecked, plus shared field-state attributes
Thumb	—	same as Root

Key Takeaways

1. Use Switch for immediate-effect binary settings (e.g. "dark mode", toggled instantly); use Checkbox for form selections that require an explicit submit — the UX convention, not a technical limitation, drives this choice.
2. Style Thumb's slide transition off [data-checked]/[data-unchecked], animating transform, not left/right, for smooth performance.

Connects To

• ch016 (Checkbox): shares nearly the entire prop/labeling API; the only meaningful difference is the absence of indeterminate.