Skip to content
masterclassBuddyTech Buzz5 fresh blogs · 5:00 AM IST

Conform · Pipe

field.getFieldList

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.

How it works

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.

Syntax

field.getFieldList()

Returns

Field[]

Key points

  • The method returns an array containing the field metadata for the items under the current field.
  • Item names are generated from the array structure, so callers do not need to create index-based names manually.
  • Nested array structures can be traversed by composing getFieldList() with getFieldset().
  • List operations are exposed through the form metadata model alongside the other form capabilities.

Common mistakes

  • Use it on the parent array field rather than treating each item as an unrelated field.
  • Rendering the list does not itself modify it; use the documented list intents for insertion, removal, and reordering.

Example: Render an array field

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.

When to use it

Dynamic list fields

Render repeated inputs for tags, tasks, or other array-valued form fields.

Nested array objects

Traverse arrays of nested objects by combining item fields with getFieldset().

Editable collections

Pair rendered list items with Conform's list intents for insertion, removal, and reordering.

Interview questions

QWhat does 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.

QHow are item field names determined?

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.

QHow do you handle nested array data?

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 intent
  • remove intent
  • reorder intent
  • useForm
  • useField

Source: useField - Conform. Checked 2026-10-15.