Message

A message is the error line under a control. Outside a FormItem it is a plain <p role="alert">; inside one it renders the Headless UI Description, so the control's aria-describedby picks it up and it mirrors the item's data-invalid / data-disabled.

import Message from '@zuilib/components/message'

Text

error accepts a string or an object with an optional message, which makes a form library's field error fit without an import. The error text wins over children; an error with no text (a field error carrying only a type) falls back to children; with neither, nothing renders.

Loading example

In a form item

Inside a FormItem the message's id lands in the control's aria-describedby (an explicit id is respected). Pair it with invalid on the item so the control paints its error state too.

Loading example

Polite announcements

The default role="alert" interrupts. For a message that should wait its turn (a hint that appears as the user types), pass role="status".

Loading example

Props

MessageProps extends React.HTMLAttributes<HTMLParagraphElement> with:

Prop	Type	Default	Description
error	MessageError = { message?: string } | string	—	A string renders as is; an object renders its message. Text here wins over children; an object without text falls back to children.
children	ReactNode	—	Fallback body when error has no text
role	string	'alert'	Pass 'status' for a polite announcement
id	string	—	Respected inside a FormItem; joins the control aria-describedby
className	string	—	Merged last

Slots

Slot	Element	Notes
[data-slot="message"]	p	Root. Mirrors the enclosing item's data-invalid / data-disabled

/* Consumer CSS: icon before every message */
[data-slot="message"]::before {
  content: "⚠ ";
}

Tokens

Token	Used for
--destructive	Text colour
--text-sm	Type size

Accessibility

• role="alert" by default: screen readers announce the text as soon as it renders. Use role="status" for non-urgent text.
• Inside a FormItem it renders the Headless UI Description, so the field's control gets the message id in aria-describedby automatically.
• Outside a FormItem it is a plain <p>: give it an id and reference it from the control's aria-describedby yourself.
• Renders nothing when there is no text, so an empty error never leaves an empty live region behind.

Related

• FormItem: the field wrapper that wires the message to its control.
• Label and Description: the other parts of a field.
• Input: the control that most often sits above a message.