Inline field messages
Display inline validation feedback beside an input.
Conform · Pipe
field.errors
field.errors is the optional validation error attached to a Conform field. Render it conditionally and connect the message to the input with the field’s generated errorId.
How it works
field.errors is field metadata exposed by Conform and contains the validation error for that field. In a React component, obtain the metadata with useField, render the errors when present, and use errorId with aria-describedby to associate the message with its input.
Syntax
const [meta, form] = useField(name, options);Returns
An ErrorShape | undefined containing the validation error for the field, or undefined when no error is present.
Key points
- The property stores validation feedback belonging to the current field.
- Its value is optional and follows Conform's
ErrorShapetype. - The same field metadata can be accessed through the object returned by
useForm. - Conform provides an ID specifically for linking the control and its error message.
- The related invalid-state metadata communicates the field's validation status to assistive technology.
Common mistakes
- Treat the error state as optional:
errorscan be absent, so conditional rendering and conditional ARIA attributes are appropriate. - Associate the input with its rendered error through the generated
errorId; otherwise screen readers may not connect the two.
Example: Render a field error
import { useField } from '@conform-to/react';
export function EmailField() {
const [meta] = useField('email');
return (
<>
<input
name={meta.name}
defaultValue={meta.initialValue}
aria-invalid={meta.errors ? true : undefined}
aria-describedby={meta.errors ? meta.errorId : undefined}
/>
{meta.errors ? <div id={meta.errorId}>{meta.errors}</div> : null}
</>
);
}Read the field's validation state and connect its generated error ID to the input for accessible error messaging.
When to use it
Accessible error association
Expose validation messages to screen readers.
Componentized form fields
Build reusable child components that consume form metadata.
Interview questions
QWhat does field.errors represent?
field.errors is the validation error for one field and is exposed as part of field metadata. It can be rendered beside the corresponding control when it exists.
Follow-up: How should the message be associated accessibly? Render it with the field's errorId and point the input's aria-describedby to that ID.
QHow do you obtain field errors in a child component?
Use useField(name) inside a component under the relevant FormProvider, then read the returned field metadata. The metadata is equivalent to the corresponding field entry returned by useForm.
Follow-up: What happens if the component is outside the provider context? The hook cannot obtain the intended field metadata, so it should be moved under the appropriate provider.
QHow do field errors fit into accessibility?
The field metadata also supplies an ariaInvalid value that indicates whether validation errors exist. The error message should use errorId so the control can reference it with aria-describedby.
Follow-up: How can a component support stronger TypeScript checking? Use the documented FieldName type instead of a plain string for the field name.
Related
useFielduseFormerrorIdariaInvalidErrorShapeuseFormMetadata