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.