Chapter 20: Label

Core Idea

An accessible label based on the native label element — automatically associates with a control by wrapping it or via htmlFor, and suppresses text selection on double-click.

Key Concepts

• Root: renders (or, via asChild, wraps) a native label; accepts htmlFor for explicit association with a control by id.
• Nested controls: wrapping a control directly inside Label.Root associates them implicitly, same as native HTML.
• Native-element requirement for custom controls: any custom control you label must be built on a real native interactive element (button, input) at its root for the association to actually work with assistive technology.

Key Takeaways

1. Prefer wrapping the control inside Label.Root for the simplest implicit association; use htmlFor when the control can't be a direct child (e.g. it's rendered elsewhere in the DOM via Portal).
2. Double-click text selection is disabled by default — a small but deliberate UX detail so clicking a label to focus its control doesn't also select the label text.
3. This is a genuinely tiny primitive (one part, one meaningful prop) — reach for it any time you'd otherwise write a bare <label>.

Connects To

• Form: Form.Label builds on the same labelling contract but adds automatic validity-state data attributes.