Label

Inside a FormItem this is Headless UI's Label: 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/components/label'

In a FormItem

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

isDirty 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 item's state as data-invalid / data-disabled, so consumer CSS can colour it with the control.

Loading example

Standalone

Outside a FormItem 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
isDirty	boolean	false	"Unsaved" badge; also sets data-dirty
htmlFor	string	—	Required outside a FormItem. 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-dirty, and the item's data-invalid / data-disabled
[data-slot="label-required"]	span	The asterisk and its sr-only text
[data-slot="label-dirty"]	span	The "Unsaved" badge

Tokens

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

Accessibility

• Inside a FormItem the label is associated by generated for / aria-labelledby; clicking it focuses the control.
• Outside a FormItem the Headless UI label would throw, so 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

• FormItem: the Field that generates the ids.
• Description and Message: the other parts of a field.
• Input: unsaved pairs with isDirty.