Accessibility

On this guide, we will show you how to utilize the inferred field id to setup aria attributes on the form controls.

Configuration

If you provide an id to the useForm hook, conform will infer an unique id on each field which you can use to setup aria attributes on the form controls.

1import { useForm, conform } from '@conform-to/react';
2import { useId } from 'react';
3
4function Example() {
5    // If you are using react 18, you can generate
6    // an unique id with the useId hook
7    const id = useId()
8    const [form, { message }] = useForm({
9        id,
10    });
11
12    return (
13        <form {...form.props}>
14            <label htmlFor={message.id}>
15            <input
16                type="text"
17                id={message.id}
18                name={message.name}
19                defaultValue={message.defaultValue}
20                aria-invalid={message.error ? 'true' : undefined}
21                aria-describedby={message.error ? `${message.id}-error` : undefined}
22            />
23            <div id={`${message.id}-error`}>
24                {message.error}
25            </div>
26            <button>Send</button>
27        </form>
28    );
29}
30

Or you can use the conform helpers to configure the aria attributes together with all other attributes.

1import { useForm, conform } from '@conform-to/react';
2import { useId } from 'react';
3
4function Example() {
5    // If you are using react 18, you can generate
6    // an unique id with the useId hook
7    const id = useId()
8    const [form, { message }] = useForm({
9        id,
10    });
11
12    return (
13        <form {...form.props}>
14            <label htmlFor={message.id}>
15            <input
16                {...conform.input(message, {
17                    type: 'text',
18                })}
19            />
20            <div id={conform.errorId(message)}>
21                {message.error}
22            </div>
23            <button>Send</button>
24        </form>
25    );
26}
27