FieldLabel

The label above a form control. Field and Select render it for you; use it alone for a control of your own.

import { FieldLabel } from '@zitdevs/ui';

Examples

Full name*Phone (optional)Teléfono (opcional)

On the inverse or the primary band, surface="dark":

Email*Company (optional)

<FieldLabel htmlFor="phone" label="Phone" requirement="optional" />
<input id="phone" type="tel" />

Props

Prop	Type	Default	Notes
htmlFor	string	required	The id of the control it names.
label	string	required
requirement	'none' | 'required' | 'optional'	'none'	Draws the asterisk or “(optional)”. The control’s required is yours.
hideLabel	boolean	false	Off screen, still the name, “(optional)” included.
surface	'light' | 'dark'	'light'	dark on the inverse and the primary band.
labels	Partial<FieldLabelLabels>	English	{ optional }. es.fieldLabel from @zitdevs/ui/labels/es.
ref	Ref<HTMLLabelElement>	—
className	string	—	Placement. Merged last.
anything else	<label> attributes	—	id lets another control name itself with it through aria-labelledby.

Exported types: FieldLabelProps, FieldRequirement, FieldLabelLabels, and the label sets fieldLabelLabels.

Accessibility

• A native <label for>: clicking it focuses the control, and it is the control’s name.
• The asterisk is aria-hidden; the control’s own required is what assistive technology announces. “(optional)” is read as part of the name, because nothing else would say it.
• hideLabel keeps the name for a control whose purpose the layout already shows, such as a search bar.

Without JavaScript

It needs none: one <label>. It renders as a Server Component.

Theming

ink and muted on a light field, accent-strong for the asterisk (4.5:1 where the accent itself is 3.4:1); on-inverse for all three on a dark one.