Display group-wide errors
A checkbox or radio group has validation messages attached to individual choices.
Conform · Pipe
field.allErrors
field.allErrors exposes all validation errors associated with a field, including errors attached to nested or indexed paths. Collect and flatten its values when rendering a complete error list.
How it works
allErrors is field metadata that exposes errors across the field's nested or indexed paths. Convert its values to an array, flatten them, and render the resulting messages when you need a complete error list rather than only the field's direct errors.
Syntax
field.allErrorsReturns
A map of field paths to arrays of error messages, suitable for collecting all errors associated with the field.
Key points
- Use
allErrorswhen the UI must show the complete collection of errors associated with a field. - A typical rendering pattern extracts the map values and flattens them into one list of messages.
- For multiple uploads, direct field errors may not contain every per-file validation message.
- Individual file errors are stored under indexed paths, such as a particular file position.
Common mistakes
- For multiple-file inputs, the regular field errors may omit errors belonging to individual files; use
allErrorswhen the complete set is needed. - File-level validation errors are associated with indexed paths such as
files[0], so inspect all error entries rather than only the array-level field.
Example: Display all checkbox errors
import { useForm } from '@conform-to/react';
export function AnswerForm() {
const [form, fields] = useForm();
return (
<form id={form.id} onSubmit={form.onSubmit}>
<fieldset>
<legend>Choose an answer</legend>
{['yes', 'no'].map((answer) => (
<label key={answer}>
<input
type="checkbox"
name={fields.answer.name}
value={answer}
/>
{answer}
</label>
))}
<div>{Object.values(fields.answer.allErrors).flat().join(', ')}</div>
</fieldset>
<button type="submit">Submit</button>
</form>
);
}Reads every error associated with the answer field, including errors mapped to individual checkbox values, and renders them together.
When to use it
Show every upload error
A multiple-file input has errors mapped to individual file indexes.
Interview questions
QWhat problem does field.allErrors solve?
allErrors is intended for displaying every error associated with a field. Its entries can include errors from nested or indexed field paths, so their values are commonly flattened before rendering.
Follow-up: Why might a multiple-file field need allErrors instead of its ordinary errors? Because errors can be mapped to each file's indexed path rather than the array field itself.
QWhen is allErrors useful with checkbox groups?
For a field containing multiple checkbox or radio values, validation can produce errors associated with individual values. Reading the values of allErrors lets the UI present those messages together.
Follow-up: How would you render the messages? Use Object.values(field.allErrors).flat() and render the resulting strings.
QHow is allErrors typically rendered?
The documented usage is to obtain the error map's values, flatten the arrays, and render the resulting messages. This provides a complete display without relying on only one path's direct errors.
Follow-up: What should be checked if messages are missing? Verify that the schema errors are mapped to the expected field or indexed paths.
Related
field.errorsfield.errorIdgetFieldsetPropsuseForm