Label

An accessible text label for form controls. The controls in this library are deliberately label-less — Checkbox, Switch, and Input render just the control, with no built-in text — so Label is the piece you pair with them. This keeps labelling explicit and lets you place and style the text however you need.

The important prop is for: set it to the control's id and the two become associated. That association does real work — clicking the label focuses or toggles the control, and screen readers announce the label when the control gains focus. Always pair a control with a Label (or give the control an aria-label) so it has an accessible name.

Usage

On its own, Label is just styled, selectable label text.

BasicA standalone label.

With a checkbox

Give the control an id and the label a matching for. Now clicking the label text toggles the checkbox — a larger, easier click target, and the correct accessible association.

With CheckboxClicking the label toggles the checkbox.

With a switch

The same for/id pairing works with any control.

With SwitchClicking the label toggles the switch.

Props

Prop	Type	Default	Description
for	string	—	Associates the label with a control by its id. Enables click-to-focus and the accessible name.
class	string	—	Classes merged onto the element.

Accessibility

• Label renders a native <label>, so the for/id association is real HTML labelling — no ARIA needed.
• Setting for to the control's id gives the control its accessible name and makes the label a click target for it. This is the recommended way to label a control.
• When you use a control without a visible label, give the control an aria-label instead so it still has an accessible name.

TIP

Inside a Field, prefer FieldLabel — it wires the for to the field's control automatically, so you don't manage ids by hand.