Conditional styling
Add valid or invalid CSS classes to a field wrapper.
Conform · Pipe
field.valid
field.valid is a boolean field-metadata property that reports whether the field currently has no validation errors. Use it for conditional styling and accessibility state such as aria-invalid.
How it works
field.valid is a boolean field-metadata property indicating whether the field currently has no validation errors. Use it when rendering conditional styles or accessibility attributes, such as setting aria-invalid when the field is not valid.
Syntax
field.validReturns
boolean
Key points
- The property is true when the field currently has no validation errors.
- Field validity is accessed through field metadata supplied by Conform's React APIs.
- Reusable field components can consume this metadata instead of receiving validity through separate props.
- Invert the property when mapping a valid field state to the accessibility attribute
aria-invalid. - Conditional classes can distinguish valid and invalid rendering states.
Common mistakes
- For accessibility,
aria-invalidshould be true only when the field is invalid; omit it rather than setting it to false when valid.
Example: Expose field validity
import { useForm } from '@conform-to/react';
export function EmailField() {
const [form, fields] = useForm();
const field = fields.email;
return (
<form id={form.id}>
<label htmlFor={field.id}>Email</label>
<input
id={field.id}
name={field.name}
aria-invalid={!field.valid || undefined}
/>
</form>
);
}Use the field's validity metadata to expose an invalid state to assistive technology.
When to use it
Accessible validation state
Set aria-invalid only when a field has errors.
Reusable field components
Create reusable field components that render from Conform metadata.
Interview questions
QWhat does field.valid represent?
field.valid is a boolean in the metadata returned for a field. It reports whether that field currently has no validation errors.
Follow-up: How would you expose the state to screen readers? Set aria-invalid to true when field.valid is false, and leave it undefined otherwise.
QWhen would a field be considered valid?
The value reflects the field's current validation state, so it can be used while rendering the field. A valid value means the field has no current validation errors.
Follow-up: What related metadata can identify the error content? Use the field's error metadata, such as its error identifier, when associating an error message.
QHow can field.valid be used in a component?
A common use is conditional presentation: choose a valid or invalid class based on field.valid. It can also drive accessibility attributes on the input.
Follow-up: How can the validation state be triggered? Configure form validation behavior or invoke the form's validation intent for the relevant field.
Related
useFielduseFormgetInputPropsariaInvalid