Error summary visibility
Show or hide a form-level error summary based on the aggregate validation result.
Conform · Pipe
form.valid
form.valid is Conform form metadata indicating whether the form currently has no validation errors. Use it for conditional error summaries, submit UI, and form-level accessibility attributes.
How it works
The form.valid pipe is a boolean form-state value exposed by Conform's form metadata. It is true when the form currently has no validation errors, so it can drive conditional UI such as error summaries, submit-state messaging, or accessibility attributes.
Syntax
form.validReturns
boolean: true when the form currently has no validation errors; otherwise false.
Key points
- The value is part of Conform's form-level metadata and is exposed alongside errors and touched state.
- A true value means the form currently has no validation errors.
- It can control an error summary or whether submit-related UI is rendered.
- It can conditionally connect the form to its error description through aria-describedby.
Common mistakes
- valid describes the current validation state, not whether the form has ever been submitted or whether every field has been touched.
- When connecting a form-level error description, omit the error ID while the form is valid; otherwise the description may be referenced unnecessarily.
Example: Conditionally describe an invalid form
import { useForm } from '@conform-to/react';
export function ProfileForm() {
const [form] = useForm();
return (
<form
id={form.id}
onSubmit={form.onSubmit}
aria-describedby={!form.valid ? form.errorId : undefined}
>
<button type="submit">Submit</button>
</form>
);
}Use the form metadata's valid flag to conditionally expose the form-level error description while the form has validation errors.
When to use it
Accessible error association
Set aria-describedby only while the form has errors.
Conditional submission UI
Disable or conditionally render submit-related UI when validation fails.
Interview questions
QWhat does form.valid represent?
form.valid is a boolean in the form metadata. It is true when the form currently has no validation errors and false when validation errors exist.
Follow-up: How can it support accessibility? Use it to conditionally set aria-describedby to the form's error ID only while the form is invalid.
QHow can form.valid be used in a React component?
Use the value in conditional rendering or attribute expressions. For example, an error summary or submit-related message can be shown when !form.valid.
Follow-up: What should be combined with validity for a less intrusive message? Also track whether the form has been touched, so an error message is not shown before interaction.
QIs form.valid field-level or form-level state?
The flag belongs to the metadata returned by useForm and is available wherever that metadata is used. It reflects the form's current aggregate validation result rather than a particular field's state.
Follow-up: How would you handle a field-specific condition? Read that field's own valid metadata instead of the aggregate form.valid value.
Related
useFormMetadatauseFormerrorstouchederrorIdgetFormProps