FieldError

A field error is the error line under a control. Outside a Field it is a plain <p role="alert">; inside one it registers with the field, so the control's aria-describedby picks it up and it mirrors the field's data-invalid / data-disabled.

import FieldError from '@zuilib/primitives/field-error'

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 field

Inside a Field the error's id lands in the control's aria-describedby (an explicit id is respected). Pair it with invalid on the field 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

FieldErrorProps extends React.HTMLAttributes<HTMLParagraphElement> with:

Prop	Type	Default	Description
error	FieldErrorLike = { 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 Field; joins the control aria-describedby
className	string	—	Merged last

Slots

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

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

Tokens

Token	Used for
--danger	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 Field the control gets the error id in aria-describedby automatically.
• Outside a Field 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

• Field: the field wrapper that wires the error to its control.
• Label and FieldDescription: the other parts of a field.
• Input: the control that most often sits above an error.