Description

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

import Description from '@zuilib/components/description'

In a FormItem

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 item's state as data-invalid / data-disabled so consumer CSS can style it; the text colour itself does not change (validation text belongs in Message).

Loading example

Standalone

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

Loading example

Props

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

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

Slots

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

Accessibility

• Inside a FormItem, every Headless UI control in the item (and every ZUI control, which renders one) gets this element's id in aria-describedby; more than one Description is joined.
• Outside a FormItem, nothing is wired: set id here and aria-describedby on the control.
• It is static text. Validation errors go in Message, which has role="alert" and announces.

Related

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