Skip to content
masterclassBuddyTech Buzz5 fresh blogs · 5:00 AM IST

Conform · Pipe

form.allErrors

form.allErrors is a field-metadata record of validation errors, keyed by field name. Flatten its values to render all messages for a field.

How it works

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.

Syntax

allErrors: Record<string, FormError>

Returns

Record<string, FormError> containing validation errors for each field; keys are field names and values are arrays of error messages.

Key points

  • allErrors exposes validation errors associated with every field.
  • Each record key identifies a field, while its value stores that field’s messages in an array.
  • The field-metadata property is intended for displaying the complete set of available errors.
  • A practical rendering pattern extracts the record values and flattens the message arrays.

Common mistakes

  • Use allErrors when the regular field error view does not expose every validation message.
  • The record is keyed by field name, and each value is an array rather than one standalone message.

Example: Render all errors for a field

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.

When to use it

Display complete field feedback

A field can receive several validation messages and the UI must show them all.

Render grouped-control errors

A checkbox or radio group needs to present every error associated with the group.

Show file-upload errors

Multiple uploaded files produce errors mapped to different indexes.

Interview questions

QWhat does the allErrors property contain?

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.

QWhen should a field use allErrors instead of the usual errors property?

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.

QHow can all errors be displayed in a component?

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.

  • useForm
  • field metadata
  • errors
  • getInputProps
  • getTextareaProps

Source: useForm. Checked 2026-10-15.