Apply accessible props without repetitive ID and ARIA wiring.
Native form controls
Conform · Const
accessibility attributes
Conform's accessibility support derives IDs, validation attributes, and ARIA relationships for forms and fields. Its helpers reduce the boilerplate needed to apply these properties to native HTML controls.
How it works
Conform derives accessibility-related metadata for forms and fields, including stable IDs for labels, descriptions, and errors. It also exposes validation attributes derived from a schema and values for aria-invalid and aria-describedby, while convenience helpers can apply the resulting props to native HTML controls.
Syntax
getFormProps(form, options); getInputProps(meta, options); getSelectProps(meta, options); getTextareaProps(meta, options); getCollectionProps(meta, options)Key points
- Conform generates the IDs used to associate controls with labels, descriptions, and validation messages.
- Field metadata can receive HTML validation attributes derived from Zod or Yup constraints.
- ARIA wiring includes setting aria-invalid from field validity and linking errors through aria-describedby.
- Progressive enhancement can preserve form state across refreshes and reduce the effect of temporary network failures.
Common mistakes
- The helpers are intended for native HTML elements; custom component libraries may already provide equivalent accessibility attributes.
- Avoid adding the helpers blindly when a custom UI library already manages the relevant attributes.
Example: Accessible native form controls
import { useForm, getFormProps, getInputProps } from "@conform-to/react";
export function ContactForm() {
const [form, fields] = useForm();
return (
<form {...getFormProps(form)}>
<label htmlFor={fields.email.id}>Email</label>
<input {...getInputProps(fields.email, { type: "email" })} />
<div id={fields.email.errorId}>{fields.email.errors}</div>
</form>
);
}These helpers apply the form and field metadata needed for native controls, while the generated IDs connect labels and validation messages.
When to use it
Expose browser validation hints derived from Zod or Yup constraints.
Schema-driven validation
Retain list-field state through progressive enhancement when a page refreshes.
Resilient form UX
Interview questions
QWhat accessibility information does Conform provide?
The accessibility metadata includes generated IDs that associate labels, descriptions, and error messages with their controls. Field metadata can also provide aria-invalid and aria-describedby values based on validation state.
Follow-up: How would you connect both help text and an error? Use the field description ID together with the error reference in the control's aria-describedby value.
QHow are validation attributes generated?
Validation constraints can be derived from a Zod or Yup schema and placed on each field's metadata. This lets native controls expose constraints such as required or length limits to browsers and assistive technology.
Follow-up: Why derive constraints from the schema? It keeps client-side HTML validation hints aligned with the schema that defines the form's validation rules.
QWhich helpers reduce accessibility boilerplate?
getFormProps, getInputProps, getSelectProps, getTextareaProps, and related helpers reduce repetitive prop wiring for native elements. They apply the metadata needed for accessible form behavior.
Follow-up: Are these helpers mandatory? No; the page describes them as convenience helpers, so metadata can be assigned directly when preferred.
Related
getFormPropsgetFieldsetPropsgetInputPropsgetSelectPropsgetTextareaPropsgetCollectionPropsuseFormgetZodConstraint