Reduce input boilerplate
Native form fields
Conform · Function
getInputProps
getInputProps turns Conform field metadata into the props for an accessible native input. Its options control input type, default-value handling, and ARIA attributes.
How it works
getInputProps converts Conform field metadata into the props needed by a native input, including its name, identifier, default state, and accessibility attributes. The required type option determines whether the input uses defaultValue or defaultChecked; options can adjust value handling and ARIA behavior.
Syntax
const props = getInputProps(meta, options);Parameters
| Name | Type | Description |
|---|---|---|
meta | FieldMetadata | Field metadata used to derive the input props. |
options | GetInputPropsOptions | Options controlling input type, value handling, and ARIA attributes. |
Returns
An object containing props for an accessible native input element.
Key points
- It derives the props needed to connect a native input to Conform metadata and accessibility behavior.
- Provide the input type through options; this influences the generated initial-value prop.
- ariaAttributes toggles generation of the two main ARIA attributes and defaults to true.
- ariaInvalid normally bases accessibility state on meta.errors, but it can be configured to use meta.allErrors.
- ariaDescribedBy adds another description ID, such as the field metadata's descriptionId.
Common mistakes
- Use it for native HTML inputs; custom components may need their own helper.
- The type option affects whether the generated uncontrolled state is defaultValue or defaultChecked.
- Set value to false when integrating with a controlled input.
Example: Accessible password input
import { useForm, getInputProps } from '@conform-to/react';
export function LoginForm() {
const [form, fields] = useForm();
return (
<form {...form}>
<label htmlFor={fields.password.id}>Password</label>
<input {...getInputProps(fields.password, { type: 'password' })} />
</form>
);
}Pass field metadata and an input type to generate the native input props.
When to use it
Wire field errors to ARIA attributes
Validation feedback
Suppress generated default state
Controlled React inputs
Interview questions
QWhat does getInputProps do?
getInputProps(meta, options) returns props for an accessible native input. It uses field metadata and options such as type to choose the correct default state and ARIA attributes.
Follow-up: How would you use it with a controlled input? Set the value option to false so the helper does not add defaultValue or defaultChecked.
QWhy is the type option significant?
The type option identifies the input type and determines whether the generated initial state is defaultValue or defaultChecked. It is passed alongside the field metadata.
Follow-up: What happens if ARIA behavior must reflect all errors? Configure ariaInvalid to use meta.allErrors instead of the default error collection.
QHow can you customize accessibility output?
ARIA attributes are included by default. ariaAttributes controls whether aria-invalid and aria-describedby are generated, while ariaDescribedBy can append an additional description-element ID.
Follow-up: How can a custom component reuse the same behavior? Build a project-specific helper because this helper targets native input elements.
Related
getFormPropsgetTextareaPropsgetSelectPropsuseForm