Nested State

web-form addresses state by path string, so objects and arrays nest to any depth without special wiring. A write touches only the signals along that path.

Edit the nested object and the dynamic array below — the live JSON tracks every path:

Live demo

profile.firstName

profile.lastName

tags[]

{
  "profile": {
    "firstName": "Ada",
    "lastName": "Lovelace"
  },
  "tags": [
    "pilot"
  ]
}

JSX

const form = createForm({
  initialValues: {
    profile: { firstName: "", lastName: "" },
    settings: { notifications: { email: true } },
  },
});

<input {...form.register("profile.firstName")} />
<input {...form.register("settings.notifications.email")} type="checkbox" />

Read nested values and errors with ordinary property access on the reactive proxies:

JSX

<p>{form.values.profile.firstName}</p>
{form.errors.profile?.firstName ? (
  <span class="error">{form.errors.profile.firstName}</span>
) : null}

Arrays

Index into arrays with bracket-free dotted paths:

JSX

const form = createForm({
  initialValues: { tags: ["", ""] },
});

<input {...form.register("tags.0")} />
<input {...form.register("tags.1")} />

Fine-grained by design

Because each path owns its own signal, editing tags.1 never re-runs effects that read tags.0 — large forms stay fast without memoization.

Resetting

reset() returns the form to its initialValues; pass an object to reset to new baseline values (and make them the new "initial" for isChanged).

JSX

form.reset();                              // back to initial
form.reset({ profile: { firstName: "Ada" } }); // new baseline