Label

Inside a Field the for and aria-labelledby are generated for the field's control. Outside one it is a plain <label>, so pass htmlFor yourself.

import Label from '@zuilib/primitives/label'

In a Field

No ids to manage. The field generates the control id, the label targets it, and the description joins aria-describedby.

Loading example

Required

required appends a decorative asterisk and visually hidden "(required)" text. Set required on the control too so the requirement is exposed programmatically.

Loading example

Unsaved

unsaved shows an "Unsaved" badge on the warning colour. Pair it with the control's unsaved prop, which tints the field.

Loading example

Invalid and disabled

The label mirrors the field's state as data-invalid / data-disabled, so consumer CSS can colour it with the control.

Loading example

Standalone

Outside a Field nothing is generated: give the control an id and the label a matching htmlFor.

Loading example

Props

LabelProps extends LabelHTMLAttributes<HTMLLabelElement> (htmlFor, onClick, …) with:

Prop	Type	Default	Description
required	boolean	false	Asterisk plus visually hidden "(required)"; also sets data-required
unsaved	boolean	false	"Unsaved" badge; also sets data-unsaved
htmlFor	string	—	Required outside a Field. Inside one it overrides the generated for: a control that sets its own id needs a matching htmlFor
className	string	—	Merged last onto the root

Slots

Slot	Element	Notes
[data-slot="label"]	label	Root. Also data-required, data-unsaved, and the field's data-invalid / data-disabled
[data-slot="label-required"]	span	The asterisk and its sr-only text
[data-slot="label-unsaved"]	span	The "Unsaved" badge

Tokens

Token	Used for
--foreground, --text-sm, --font-weight-medium	Label text
--danger	Required asterisk
--warning, --warning-text	Unsaved dot and text

Accessibility

• Inside a Field the label is associated by generated for / aria-labelledby; clicking it focuses the control.
• Outside a Field a plain <label> is rendered: htmlFor is on you.
• The required asterisk is aria-hidden; "(required)" is read instead. Put required on the control as well.
• The "Unsaved" badge is plain text and part of the accessible name.

Related

• Field: the wrapper that generates the ids.
• FieldDescription and FieldError: the other parts of a field.
• Input: unsaved pairs with the label's unsaved.