Conform · Const

array fields

Conform models array fields with bracket-index naming and exposes repeated items through getFieldList(). The generated item metadata supplies names automatically and works with insert, remove, and reorder intents.

How it works

Array fields are represented through field metadata rather than manually assembled names. Call getFieldList() on the parent field to obtain item metadata, then render each item with its generated name; array contents can also be changed with insert, remove, and reorder intents.

Syntax

const items = fields.arrayField.getFieldList();

Key points

Array paths use bracket indices, while object properties use dots; the two forms can be combined.
Call getFieldList() on the parent metadata when a form field contains repeated array items.
Use each returned item's generated name instead of reconstructing names yourself.
The same naming model supports arrays nested inside other structured data.

Common mistakes

Do not manually construct item names when generated metadata is available; using it preserves Conform's inferred naming and type safety.
Rendering an array list does not itself provide mutations; use the documented insert, remove, or reorder intents for list changes.

Example: Render an array field list

import { useForm } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import { z } from 'zod';

const schema = z.object({ tasks: z.array(z.string().min(1)) });

export function TasksForm() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, { schema });
    },
  });

  const taskList = fields.tasks.getFieldList();

  return (
    <form {...form.props}>
      {taskList.map((task, index) => (
        <input key={task.key} name={task.name} defaultValue={task.initialValue} aria-label={`Task ${index + 1}`} />
      ))}
    </form>
  );
}

The list metadata supplies generated names for each array item, so the rendered inputs submit as a structured array.

When to use it

Dynamic lists

Render repeated inputs whose submitted values should form an array.

Nested structures

Represent arrays inside objects or other arrays using generated nested names.

Array mutations

Add, delete, or move list entries through Conform's intent actions.

Interview questions

QHow does Conform expose an array field?

Use getFieldList() on the parent field metadata. It returns metadata for each item, including an inferred name, so each rendered control submits into the corresponding array position.

Follow-up: How would you support nested arrays? Combine getFieldset() and getFieldList() according to the nesting: use getFieldset() for an object level and getFieldList() for the array level.

QWhat naming convention represents array data?

Conform uses bracket notation such as array[index] to represent array positions. It can combine this with dot notation, so a name like tasks[0].content maps to an array item containing a content property.

Follow-up: What structured value results from tasks[0].content? It becomes an object with a tasks array whose first element has a content property containing the submitted value.

QWhy use generated item names instead of writing them manually?

Array item names are inferred from the parent field metadata when getFieldList() is used. This avoids hand-written names and gives better type safety than manually assigning each name.

Follow-up: How should dynamic field access be handled outside a static fieldset? Use the form metadata's getFieldList(name) method to access a list by name.

getFieldList()
getFieldset()
insert intent
remove intent
reorder intent

Source: Nested object and Array. Checked 2026-10-15.