FieldMessage

The line under a form control: a hint, or the error that replaces it. Field, Select and ChoiceGroup render it for you.

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

Examples

Only to reply to this request.

Enter a valid email, such as [email protected].

<input id="email" aria-describedby="email-message" aria-invalid="true" />
<FieldMessage id="email-message" text="Enter a valid email." tone="error" />

Props

Prop	Type	Default	Notes
id	string	required	Named by the control’s aria-describedby.
text	string	required
tone	'hint' | 'error'	'hint'	error adds the alert icon and the error colour.
ref	Ref<HTMLParagraphElement>	—
className	string	—	Placement. Merged last.
anything else	<p> attributes	—

Exported types: FieldMessageProps, FieldMessageTone.

Accessibility

• A plain <p>, never a live region: the control reads it as its description when it is focused, and role="alert" would read it a second time.
• The error’s icon is hidden; the words carry the meaning.
• Drawn for a light field: on a dark band, give the control neither hint nor error.

Without JavaScript

It needs none. It renders as a Server Component; on a page a failed POST returns, the error is simply part of the page.

Theming

muted for a hint; danger-strong for an error, since danger itself is 4.4:1 on white, under the 4.5:1 body text needs.