Display complete field feedback
A field can receive several validation messages and the UI must show them all.
Conform · Pipe
form.allErrors is a field-metadata record of validation errors, keyed by field name. Flatten its values to render all messages for a field.
The field metadata’s allErrors property collects validation errors by field name. Its value is a record whose entries contain error-message arrays, so use Object.values() and flatten the result before displaying all messages.
allErrors: Record<string, FormError>Record<string, FormError> containing validation errors for each field; keys are field names and values are arrays of error messages.
import { useForm } from '@conform-to/react';
export function Example() {
const [form, fields] = useForm();
const messages = Object.values(fields.email.allErrors).flat();
return (
<form id={form.id} onSubmit={form.onSubmit}>
<input name={fields.email.name} />
<div>{messages.join(', ')}</div>
<button>Submit</button>
</form>
);
}Read the field metadata’s allErrors object and flatten its values when rendering every validation message.
A field can receive several validation messages and the UI must show them all.
A checkbox or radio group needs to present every error associated with the group.
Multiple uploaded files produce errors mapped to different indexes.
allErrors is a record of validation errors for each field in the form. Its keys are field names, and each value contains an array of error messages.
Follow-up: How would you render every message for one field? Read that field’s allErrors value, take Object.values(), and flatten the resulting arrays before rendering them.
Use the field metadata’s allErrors property when you need to display all errors associated with that field. This is useful when the ordinary errors view does not include every message.
Follow-up: What shape should a renderer expect? It should handle a record keyed by field names and arrays of messages as the values.
For a field such as fields.answer, collect the record’s values and flatten them: Object.values(fields.answer.allErrors).flat(). The resulting list can then be displayed.
Follow-up: Why flatten the values? Because each record value is an array of error messages, so flattening produces one renderable message list.
useFormfield metadataerrorsgetInputPropsgetTextareaProps