Dynamic list fields
Render repeated inputs for tags, tasks, or other array-valued form fields.
Conform · Pipe
Returns the field metadata objects for the items of an array field. Item names are inferred from the parent field, making dynamic list rendering straightforward.
Call this method on parent field metadata when a form field represents an array. It returns one field metadata object per current item, with names inferred from the array structure; each item can then be rendered or converted to a fieldset for nested data.
field.getFieldList()Field[]
getFieldList() with getFieldset().import { useForm } from '@conform-to/react/future';
export function TagsForm() {
const { form, fields } = useForm({
defaultValue: { tags: ['react', 'forms'] },
});
const tagFields = fields.tags.getFieldList();
return (
<form {...form.props}>
{tagFields.map((tag) => (
<input key={tag.key} name={tag.name} defaultValue={tag.initialValue} />
))}
</form>
);
}Gets the metadata objects for each item in an array field, allowing the UI to render every item with its inferred field name.
Render repeated inputs for tags, tasks, or other array-valued form fields.
Traverse arrays of nested objects by combining item fields with getFieldset().
Pair rendered list items with Conform's list intents for insertion, removal, and reordering.
getFieldList() return and why is it useful?getFieldList() is a field-metadata method that returns an array of fields for list or array fields. Calling it on the parent metadata provides access to each item with its name inferred automatically.
Follow-up: How would you render nested array objects? Call getFieldList() for the outer array, then call getFieldset() on each returned item to access its nested properties.
The returned objects represent the current items in the array field. Their inferred names let inputs participate in form submission without manually constructing index-based names.
Follow-up: How can the list be changed? Use the insert, remove, and reorder intents described by Conform rather than changing only the rendered elements.
For an array of nested objects, first obtain the item fields with getFieldList(), then obtain each item's child fields with getFieldset(). This composes the list and nested-object APIs.
Follow-up: What is the modern replacement for the removed list hook? Call getFieldList() on field metadata instead of using the legacy useFieldList hook.
getFieldset()insert intentremove intentreorder intentuseFormuseField