Nested Form

Demonstrates how to mirror a nested data model in form config using section with nested: true and defineConfig for typed config fragments.

Preview & Code

Preview

Code

import { Form, defineConfig } from "./form.setup";

type AddressData = {
  street: string;
  city: string;
  country: string;
};

type ProfileData = {
  fullName: string;
  email: string;
  address: AddressData;
};

const addressConfig = defineConfig<AddressData>({
  street: {
    type: "text",
    label: "Street",
    rules: { required: "Street is required" },
  },
  city: {
    type: "text",
    label: "City",
    rules: { required: "City is required" },
  },
  country: {
    type: "text",
    label: "Country",
    rules: { required: "Country is required" },
  },
});

function EgNestedForm() {
  return (
    <Form<ProfileData>
      config={{
        fullName: {
          type: "text",
          label: "Full Name",
          rules: { required: "Full name is required" },
        },
        email: {
          type: "text",
          label: "Email",
          props: { type: "email" },
          rules: { required: "Email is required" },
        },
        address: {
          type: "section",
          label: "Address",
          props: {
            nested: true,
            config: addressConfig,
          },
        },
      }}
      onSubmit={(data) => alert(JSON.stringify(data, null, 2))}
    >
      <button type="submit">Save profile</button>
    </Form>
  );
}

export default EgNestedForm;

How it works

section with nested: true — the address key becomes a namespace in the form state. Submitted data reflects the model shape:

{
  fullName: "Jane Doe",
  email: "jane@example.com",
  address: {
    street: "123 Main St",
    city: "Hanoi",
    country: "Vietnam",
  }
}

defineConfig<AddressData> — explicitly scopes the config fragment to AddressData, giving TypeScript full visibility into field keys and types within the section. Without it, TypeScript cannot infer the nested model shape from Form<ProfileData> alone.

Separation of concerns — addressConfig is defined outside the form and can be imported and reused in any other form that has an address field of the same shape.

Tip

If you prefer not to use section, dot notation keys are an alternative — "address.street" maps directly to the nested path with no extra setup. Use section when you want the config structure to mirror the data model.

Nested Form#

#Preview & Code

#How it works

Nested Form

Preview & Code

How it works