Arrays and nested data

In additional to handling regular repeated fields, this library can also handle more complex arrays and nested data in your forms. If you have fields with paths for names, it will be transformed into a nested data structure before it gets validated.

Arrays

const inputs = (
  <>
    <input name="todos[0]" />
    <input name="todos[1]" />
  </>
);

const result = {
  todos: ["Take out the trash", "Buy some milk"];
};

Objects:

const inputs = (
  <>
    <input name="todo.title" />
    <input name="todo.description" />
  </>
);

const result = {
  todo: {
    title: "Take out the trash",
    description: "I should really do this",
  },
};

Arrays of objects:

const inputs = (
  <>
    <input name="todos[0].title" />
    <input name="todos[0].description" />
    <input name="todos[1].title" />
    <input name="todos[1].description" />
  </>
);

const result = {
  todos: [
    {
      title: "Take out the trash",
      description: "I should really do this",
    },
    {
      title: "Buy some milk",
      description: "We're all out",
    },
  ],
};

Dynamic arrays

For dynamic lists (e.g. adding and removing items), you can use the FieldArray component or useFieldArray hook.