Identify native field elements
Rendering a standard text or checkbox control from useForm field metadata.
Conform · Pipe
field.key
field.key is the React key exposed by Conform field metadata. Assign it to the corresponding input element so React can track that field element correctly.
How it works
The field metadata exposes key as a value for React’s key prop. Applying fields.task.key to the input helps React identify the specific field element while the other metadata supplies its form attributes and state.
Syntax
<input key={fields.fieldName.key} />Key points
- Use the field metadata key as the input element’s React key.
- Checkbox fields use the same key pattern as ordinary input fields.
- The key is separate from the field’s DOM id, which is assigned independently.
- The field name is another distinct metadata property and should not be confused with key.
Common mistakes
- getInputProps is optional; use the metadata directly when you need explicit control over individual input props.
Example: Use a field key in React
import { useForm } from '@conform-to/react';
export function TaskForm() {
const [form, fields] = useForm({});
return (
<form id={form.id} method="post">
<input key={fields.task.key} name={fields.task.name} />
<button>Save</button>
</form>
);
}Use the field metadata key as the React key for the input so React can recreate that element when Conform changes the field identity.
When to use it
Provide stable list-item identity
Rendering repeated fields produced by a field list.
Control input props explicitly
Combining metadata with manually selected accessibility and validation attributes.
Interview questions
QWhat is fields.fieldName.key used for?
Use fields.fieldName.key as the React key on the corresponding input. This lets React identify that field element independently from its name and other attributes.
Follow-up: Why not use the field name as the key? The metadata key represents the field’s current identity, while names can remain meaningful across state changes.
QHow do you apply a field key in JSX?
Place the value on the input’s key prop, for example <input key={fields.task.key} />. The official example applies the same pattern to regular inputs and checkboxes.
Follow-up: What other field metadata is commonly assigned to an input? Use id, name, formId, initialValue, validation state, constraints, and pattern-related properties as appropriate.
QIs key supplied by getInputProps?
The key is part of field metadata, alongside properties such as id, name, and initialValue. The documentation shows it being used directly in JSX rather than generated through a separate API.
Follow-up: When would a helper be preferable? getInputProps can reduce repetitive attribute wiring for native input elements, while direct metadata is useful for custom control.
Related
getInputPropsuseFormfield metadatagetFieldsetgetFieldList