FieldDescription

Helper text, text-sm text-muted-foreground. The only work it does is wiring: inside a Field it registers its id with the field so every control inside gets aria-describedby for free, and it mirrors the field's data-invalid / data-disabled. Outside a Field it is a <p> and you associate it yourself.

import FieldDescription from '@zuilib/primitives/field-description'

In a Field

No ids anywhere: the field generates the control id and points the label and description at it.

Loading example

Invalid and disabled

The description mirrors the field's state as data-invalid / data-disabled so consumer CSS can style it; the text colour itself does not change (validation text belongs in FieldError).

Loading example

Standalone

Outside a Field it is a plain paragraph. Give it an id and reference it from the control's aria-describedby.

Loading example

Props

FieldDescriptionProps extends HTMLAttributes<HTMLParagraphElement>; there are no own props.

Prop	Type	Description
id	string	Respected inside a Field; required outside one for aria-describedby
className	string	Merged after text-sm text-muted-foreground
children	ReactNode

Slots

Slot	Element	Notes
[data-slot="field-description"]	p	Root. data-invalid / data-disabled mirror the enclosing Field

Accessibility

• Inside a Field, every control in the field gets this element's id in aria-describedby; more than one FieldDescription is joined.
• Outside a Field, nothing is wired: set id here and aria-describedby on the control.
• It is static text. Validation errors go in FieldError, which has role="alert" and announces.

Related

• Field: the wrapper that does the wiring.
• Label and FieldError: the other field parts.
• Input: the control in the examples.