Arrays and nested data

To handle complex data structures, RVF treats all field names as paths.

Objects

Objects are handled with the same dot notation as JavaScript.

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

Arrays are handled with the same square-bracket notation as JavaScript. Using dot notation for numbers is not supported.

For dynamic arrays (e.g. adding and removing items), you'll want to use useFieldArray.

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

const result = {
  todos: ["Take out the trash", "I should really do this"],
}

Type safety

You can use RVF's helpers to handle write these field names in a type-safe way.

const MyForm = () => {
  const form = useForm({
    defaultValues: {
      todos: [{ title: "Take out the trash"}, {title: "I should really do this" }],
    },
    // ...etc
  })
  
  return (
    <>
      <input name={form.name("todos[0].title")} />
      <input name={form.scope("todos[1].title")} />
    </>
  )
}