Accessible form setup
Applying Conform form metadata to a native HTML form in a React component.
Conform · Function
getFormProps
getFormProps returns the props needed to make a native form element accessible. It reduces repetitive prop wiring and supports options for controlling generated ARIA attributes.
How it works
Call getFormProps with the form metadata returned by useForm and spread the resulting object onto a native form element. Options let you control generated ARIA attributes and append an additional described-by identifier; the helper reduces boilerplate but is optional.
Syntax
getFormProps(form, options)Parameters
| Name | Type | Description |
|---|---|---|
form | FormMetadata | Form metadata returned by useForm. |
options | GetFormPropsOptions | Optional settings controlling generated ARIA attributes, including ariaAttributes, ariaInvalid, and ariaDescribedBy. |
Returns
An object containing the props required for an accessible native form element.
Key points
- getFormProps packages the accessibility-related form attributes into one object.
- The helper is optional; direct metadata-based prop assignment remains supported.
- ariaDescribedBy lets you add another identifier to the generated aria-describedby value.
- ariaAttributes is enabled by default, so the helper includes the relevant ARIA attributes unless configured otherwise.
Common mistakes
- Use it directly with native HTML form elements; create a separate helper when wrapping a custom component.
- Do not treat it as mandatory: the form metadata can be used directly when explicit prop wiring is preferable.
- If accessibility output is customized, check whether aria-describedby should be included rather than assuming it is always omitted.
Example: Applying form props
import { getFormProps, useForm } from '@conform-to/react';
export function Example() {
const [form] = useForm();
return <form {...getFormProps(form)} />;
}The helper supplies the accessibility-related props for a native form element.
When to use it
Extended ARIA description
Adding a field or form description identifier to aria-describedby.
Custom ARIA validation state
Choosing whether ARIA state uses errors or allErrors.
Interview questions
QWhat problem does getFormProps solve?
getFormProps returns the props needed to make a form element accessible. It is typically called with the form metadata from useForm and spread onto the native form element.
Follow-up: How would you use it with a custom component? The page recommends making a custom helper because this helper targets native form elements.
QWhat is the basic calling pattern?
The standard usage is getFormProps(form), where form is the first value returned by useForm. The returned props are applied with JSX spread syntax.
Follow-up: What is the alternative if you do not want the helper? Read the form metadata directly and assign the required form props yourself.
QWhich options affect the generated ARIA attributes?
The ariaAttributes option controls whether aria-describedby is included in the returned props, and it defaults to true. ariaInvalid controls whether ARIA state is based on meta.errors or meta.allErrors, while ariaDescribedBy appends an extra identifier.
Follow-up: Where can an extra description identifier come from? The documentation specifically mentions passing meta.descriptionId.
Related
useFormgetFieldsetPropsgetInputPropsgetSelectPropsgetTextareaPropsgetCollectionProps