Build reusable inputs that consume their own Conform field metadata.
Design-system controls
Conform · Hook
useField
useField is a React hook that reads field metadata from a FormProvider. It supports reusable field components and can target a specific form with formId.
How it works
useField is a React hook from Conform's future export that reads field metadata inside a FormProvider. It uses the nearest form context by default, or a specified formId, and returns generated identifiers, naming information, default value, accessibility state, and schema-derived HTML validation attributes.
Syntax
const field = useField(name, options);Parameters
| Name | Type | Description |
|---|---|---|
name | FieldName<FieldShape> | The input field name or field-name path. |
options | { formId?: string } | Optional configuration. Its documented property is formId, used to select a specific form context. |
Returns
A Field object containing field metadata and state, including id, name, formId, descriptionId, defaultValue, aria-invalid, aria-describedby, and schema-derived HTML validation attributes.
Key points
- Call useField inside a component rendered beneath FormProvider to obtain that field's metadata.
- It lets a field component obtain its own metadata instead of receiving every field prop from its parent.
- The generated id combines the form identifier and field name, making it suitable for label association.
- The returned name preserves the path passed to the hook, including nested field paths.
- Use aria-describedby to connect the control with its generated description or error element.
- Schema constraints can populate browser-facing validation properties on the returned field metadata.
Common mistakes
- The hook is in the future export, so its API may change in minor releases.
- Without formId, nested form contexts resolve to the nearest FormProvider, which may not be the intended form.
- defaultValue is a string representation; objects and arrays may produce an empty string.
Example: Reusable field component
import { FormProvider, useField } from '@conform-to/react/future';
function TextField({ name }: { name: string }) {
const field = useField(name);
return (
<div>
<label htmlFor={field.id}>{name}</label>
<input
id={field.id}
name={field.name}
form={field.formId}
defaultValue={field.defaultValue}
aria-invalid={field['aria-invalid']}
aria-describedby={field['aria-describedby']}
/>
</div>
);
}
export function Example() {
return (
<FormProvider context={context}>
<TextField name="email" />
</FormProvider>
);
}A reusable field component reads its metadata from the nearest FormProvider and applies the generated identifiers and validation attributes to an input.
When to use it
Select the correct form context by passing a formId.
Nested forms
Apply generated IDs and ARIA attributes to connect controls, descriptions, and errors.
Accessible validation UI
Use returned validation properties to reflect schema rules in HTML controls.
Schema-driven browser constraints
Interview questions
QWhat problem does useField solve?
useField reads field metadata from a FormProvider and is intended for reusable field components that avoid prop drilling. It returns metadata such as the field id, name, form id, default value, accessibility attributes, and validation attributes.
Follow-up: How can a field target a non-nearest form? Pass options.formId so the hook selects the intended form context.
QWhat are useField's inputs?
The name argument identifies the field. The optional options object currently supports formId, which targets a particular form when multiple or nested form contexts exist.
Follow-up: What happens when formId is omitted? The hook uses the nearest form context.
QWhat metadata does useField return?
The hook provides generated identifiers and accessibility state for wiring controls to their form and descriptions. It also exposes schema-derived constraints such as required, minLength, maxLength, pattern, min, max, and step when applicable.
Follow-up: Why are these useful? They let reusable controls apply consistent browser validation and accessibility metadata without manually reconstructing field state.
Related
FormProvideruseFormuseFormMetadataFieldNamegetField