# Auto Form with Nested Objects and Arrays

> A schema with a nested address object and an array of team members renders as fieldsets and a repeatable list with add, remove and reorder; errors point at the exact item. Use this when the data is a small tree, not a flat list of fields.

A shadcn/ui block from the [@tealmac](https://ui.tealmac.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/tealmac/auto-form-nested-arrays).

- Page, with a live preview: https://shadcn.exchange/r/tealmac/auto-form-nested-arrays
- Screenshot: https://shadcn.exchange/shot/tealmac/auto-form-nested-arrays/light.png
- Registry item: https://ui.tealmac.com/r/auto-form-nested-arrays.json
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/tealmac/auto-form-nested-arrays.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@tealmac/auto-form`

## Files

### `registry/patterns/auto-form-nested-arrays/auto-form-nested-arrays.tsx`

```tsx
"use client"

import * as React from "react"

import { AutoForm, type JsonSchema } from "@/components/ui/auto-form"

export const companySchema: JsonSchema = {
  type: "object",
  title: "Company profile",
  required: ["name", "address", "members"],
  properties: {
    name: { type: "string", title: "Company name", minLength: 2 },
    address: {
      type: "object",
      title: "Registered address",
      required: ["street", "city"],
      properties: {
        street: { type: "string" },
        city: { type: "string" },
        postcode: {
          type: "string",
          pattern: "^[A-Za-z0-9 -]{3,10}$",
          "x-pattern-message":
            "Use 3 to 10 letters, numbers, spaces or dashes.",
        },
      },
    },
    members: {
      type: "array",
      title: "Team members",
      minItems: 1,
      maxItems: 5,
      items: {
        type: "object",
        title: "Member",
        required: ["name", "email"],
        properties: {
          name: { type: "string" },
          email: { type: "string", format: "email" },
          role: {
            type: "string",
            enum: ["owner", "editor", "viewer"],
            default: "editor",
          },
        },
      },
    },
  },
}

export interface AutoFormNestedArraysProps {
  onSubmit?: (values: Record<string, unknown>) => void
}

export function AutoFormNestedArrays({ onSubmit }: AutoFormNestedArraysProps) {
  return (
    <div className="w-full max-w-lg">
      <AutoForm
        schema={companySchema}
        defaultValues={{ members: [{ name: "", email: "", role: "owner" }] }}
        submitLabel="Save company"
        onSubmit={(values) => onSubmit?.(values)}
      />
    </div>
  )
}
```