Form-level validation summary
Show authentication or submission failures that apply to the entire form.
Conform · Pipe
form.errors
form.errors contains validation errors for the whole form, rather than for an individual field. Render it as a form-level summary and connect that summary to the form for accessibility.
How it works
form.errors exposes validation errors associated with the whole form rather than one field. Render it in a summary region, and use form.errorId with the form’s aria-describedby relationship so assistive technologies can identify the message.
Syntax
form.errorsReturns
A form metadata property containing form-level validation errors, when present.
Key points
- The form metadata is designed around standard HTML form submission and DOM-backed values.
useForm()supplies the form metadata object that includeserrors.- A form-level error summary can render
form.errorsdirectly in the form markup.
Common mistakes
- Form-level errors should be linked to the form through
aria-describedbyso the error message is discoverable to assistive technologies.
Example: Render form-level errors
import { useForm } from '@conform-to/react';
export function LoginForm() {
const [form, fields] = useForm();
return (
<form id={form.id} onSubmit={form.onSubmit}>
{form.errors && <div id={form.errorId}>{form.errors}</div>}
<input name={fields.username.name} />
<button>Log in</button>
</form>
);
}Render the form-level error collection near the form and associate it with the form using the generated error ID.
When to use it
Server action feedback
Display a server-returned error when no single control is responsible.
Accessible error association
Expose validation feedback to assistive technology through the form’s description relationship.
Interview questions
QWhat does form.errors represent?
form.errors contains errors for the form itself, while field-specific errors are available on field metadata. A form can render the value in a summary region, as shown in the documentation.
Follow-up: How should the summary be made accessible? Use form.errorId for the summary element and reference it from the form’s aria-describedby attribute.
QHow should form-level errors be rendered?
Use a conditional render so the summary appears only when a form-level error exists. The documentation demonstrates rendering form.errors inside a div associated with the form.
Follow-up: How can the form remain progressively enhanced? Keep it as a normal HTML form and attach Conform’s generated form metadata and submission handler.
QHow does accessibility affect rendering form.errors?
The form-level error message should be connected to the form with aria-describedby. Conform provides form.errorId for that association, while form.errors supplies the content.
Follow-up: What should be used for field errors? Render each field’s error metadata next to its corresponding control and associate it with that control.
Related
useFormform.errorIdfields.fieldName.errorssubmission.replyformErrors