FieldError

FieldError is the failure-state message for a form field. It carries role="alert", so an error shown after a failed submit is announced the moment it appears.

What it is

A Text styled in the danger colour with role="alert". Inside a Field it claims the errorId from context — the same id the control already names in its aria-describedby list. Render FieldError conditionally: it should appear only when the field is in an error state.

Install

FieldError is exported from usemotif. No separate install.

import { FieldError } from 'usemotif';

API

function FieldError(props: FieldErrorProps): JSX.Element

Accessibility

role="alert" is the load-bearing attribute. When FieldError mounts — typically after a failed submit — assistive technology announces its content without the user moving focus. That only works if the element appears at the moment of the error: render FieldError conditionally, not hidden-then-shown, so the mount is the signal.

Pair it with the Field's invalid prop. invalid sets aria-invalid on the control; FieldError supplies the message that explains why. One states the fact, the other gives the reason.

Examples

Conditional error inside a Field:

<Field invalid={Boolean(errors.email)}>
<Label>Email</Label>
<Input type="email" />
{errors.email ? <FieldError>{errors.email}</FieldError> : null}
</Field>