Auto Form with Nested Objects and Arrays

FreeNew

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.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

The record has a nested object (address) and a list of objects (members) and you want both generated with the same behaviour as the flat fields.

Do not use it when: Deeply nested or recursive schemas (trees, rule engines) need a purpose-built editor.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/auto-form-nested-arrays.json

Usage

import { AutoFormNestedArrays } from "@/components/auto-form-nested-arrays"

<AutoFormNestedArrays />

Props

The pattern shows a fixed example schema (exported as companySchema). Copy it and change properties; objects render as fieldsets, arrays of objects as repeatable groups with minItems and maxItems honoured.

Accessibility

Nested objects are fieldsets with legends ("Registered address"); array items are named groups ("item 2 of 3") with move, remove and Alt+Arrow, as in Field Array.
Errors are attached to the specific input inside the item; the array's own limits ("Add at least 1.") are shown under the list after a submit attempt.
Labels inside repeated items are numbered by the generator, so each stays unique.

Testing

The pattern ships with a Testing Library test (auto-form-nested-arrays.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

The record has a nested object (address) and a list of objects (members) and you want both generated with the same behaviour as the flat fields.

Do not use it when: Deeply nested or recursive schemas (trees, rule engines) need a purpose-built editor.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/auto-form-nested-arrays.json

Usage

import { AutoFormNestedArrays } from "@/components/auto-form-nested-arrays"

<AutoFormNestedArrays />

Props

Accessibility

Nested objects are fieldsets with legends ("Registered address"); array items are named groups ("item 2 of 3") with move, remove and Alt+Arrow, as in Field Array.
Errors are attached to the specific input inside the item; the array's own limits ("Add at least 1.") are shown under the list after a submit attempt.
Labels inside repeated items are numbered by the generator, so each stays unique.

Testing

The pattern ships with a Testing Library test (auto-form-nested-arrays.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.