getInputProps

A helper that returns all the props required to make an input element accessible.

1const props = getInputProps(meta, options);

#Example

1import { useForm, getInputProps } from '@conform-to/react';
2
3function Example() {
4  const [form, fields] = useForm();
5
6  return <input {...getInputProps(fields.password, { type: 'password' })} />;
7}

#Options

`type`

The type of the input. This is used to determine whether a defaultValue or defaultChecked state is needed.

`value`

This is mainly to set the value of the input if the type is checkbox or radio. But it can also be set to false if you want to skip setting the defaultValue or defaultChecked state, e.g. a controlled input.

`ariaAttributes`

Decide whether to include aria-invalid and aria-describedby in the result props. Default to true.

`ariaInvalid`

Decide whether the aria attributes should be based on meta.errors or meta.allErrors. Default to errors.

`ariaDescribedBy`

Append additional id to the aria-describedby attribute. You can pass meta.descriptionId from the field metadata.

#Tips

The helper is optional

The helper is just a convenience function to help reducing boilerplate and make it more readable. You can always use the field metadata directly to set the props of your input element.

1// Before
2function Example() {
3  return (
4    <form>
5      {/* text input */}
6      <input
7        key={fields.task.key}
8        id={fields.task.id}
9        name={fields.task.name}
10        form={fields.task.formId}
11        defaultValue={fields.task.initialValue}
12        aria-invalid={!fields.task.valid || undefined}
13        aria-describedby={!fields.task.valid ? fields.task.errorId : undefined}
14        required={fields.task.required}
15        minLength={fields.task.minLength}
16        maxLength={fields.task.maxLength}
17        min={fields.task.min}
18        max={fields.task.max}
19        step={fields.task.step}
20        pattern={fields.task.pattern}
21        multiple={fields.task.multiple}
22      />
23      {/* checkbox */}
24      <input
25        type="checkbox"
26        key={fields.completed.key}
27        id={fields.completed.id}
28        name={fields.completed.name}
29        form={fields.completed.formId}
30        value="yes"
31        defaultChecked={fields.completed.initialValue === 'yes'}
32        aria-invalid={!fields.completed.valid || undefined}
33        aria-describedby={
34          !fields.completed.valid ? fields.completed.errorId : undefined
35        }
36        required={fields.completed.required}
37      />
38    </form>
39  );
40}
41
42// After
43function Example() {
44  return (
45    <form>
46      {/* text input */}
47      <input {...getInputProps(fields.task, { type: 'text' })} />
48      {/* checkbox */}
49      <input
50        {...getInputProps(fields.completed, {
51          type: 'checkbox',
52          value: 'yes',
53        })}
54      />
55    </form>
56  );
57}

Make your own helper

The helper is designed for the native input elements. If you need to use a custom component, you can always make your own helpers.