Label

Overview

A label names a form control and, through htmlFor, makes its text part of the control's hit target. Typography follows the Morpha scale — body (16/26/400) by default, body-sm (14/22/400) at size="sm" — in the on-surface tone.

Examples

Sizes

default is the size a control's own label uses. sm is the denser size <Field> applies, so in a dense form the label stays subordinate to the value being typed.

With controls

Pair a label with a checkbox, radio or switch by matching htmlFor to the control's id. Wrapping the pair in group/field keeps the MD3 state layer on the control: hovering the text never tints the box, but clicking it still toggles the control.

In a Field

Inside a form, reach for <FieldLabel> instead — it is this Label at size="sm" with the field's spacing, description and error wiring already attached.

Disabled

The label never disables itself — it reads the control it labels. Mark the control as a peer and the text fades to the kit's 38% disabled opacity, the same value the control uses, so the pair fades as one.

RTL

The label is a flex row with a logical gap, so an icon leads the text in LTR and trails it in RTL with no extra styling. Wrap the subtree in DirectionProvider so the controls follow.

Installation

npx shadcn@latest add label

API Reference

Accessibility

• Renders a native <label>: set htmlFor to the control's id so the text is announced with the control and clicking it focuses (or toggles) it.
• Wrapping the control in the label works too, but htmlFor is preferred — it survives the control being moved for layout.
• Text without an associated control is not a label; use a <span> or <FieldTitle> for a caption, or aria-label when there is no visible text at all.
• The disabled tone is 38% opacity, which keeps the label above the 3:1 contrast floor on both themes.