shadcn.io is not affiliated with official shadcn/ui
Nested Objects Payload Form Block for React Aria
A webhook test form with company, address and contact groups over a live JSON payload that marks the focused field's path, omits empty fields and copies exactly what it shows.
Installation
Overview
Show where each field lands with this nested objects form for React with React Aria. A compact header sits over a hairline frame with a plus mark on each corner. A fields band holds three groups, Company (a name), Address (street, city, country) and Contact (email, phone), and a payload band under it draws the JSON they make, live, in a code block. Each field names its path in its description ("Sent as address.city"), the field in focus is marked in the JSON with a bar and a tint, and a line under the code says which line it is, or that an empty field is left out. Empty fields are omitted, and a group with nothing in it goes with them. Copy JSON puts exactly what is drawn on the clipboard. Send test checks the company name, the email and the phone, then says so. It's built from Input, Native Select, Field, Button, Shine Button and Guides. For webhook and API testers, settings with nested config, and any form whose output is an object.
FAQ
How do I change the payload's shape?
Edit GROUPS: each group is an object in the JSON and each slot is a key in it, tied to a field of the form. linesOf builds the lines, with commas and indentation, from that list and from the values, and gives each line the path the focus mark compares with. Add a slot and a PathField and the payload, the marks and the copy follow.
Is the copied text always valid JSON?
Yes. Keys and values go through JSON.stringify, so quotes and backslashes are escaped, and the lines are built from the same list that is drawn, so what you copy is what you see. Values are trimmed, and a field with only spaces counts as empty and is omitted.
How does it work with a keyboard and a screen reader?
Every field has a label, and its description names the path, which a screen reader reads with the field. The code block is a focusable scroll region with a name, so you can scroll it with the arrow keys; its marked line is also stated in words under it. Copy JSON is a button, and a failed Send test puts focus on the first field with a problem.
How does it look on a phone?
The groups stack, and the code block scrolls sideways inside its own region instead of widening the page. The block's height is fixed for the longest payload, so typing never moves the buttons, and the foot is pinned with Send test at full width.
What stays local, and how do I connect it for real?
Nothing leaves the tab except what you copy: Send test says "Test sent in this demo only." In your app, post the same object to the endpoint from a server action or a route, and show the response status and body in a second band under the payload.
How do I connect it to react-hook-form or TanStack Form?
Both libraries accept dot paths, so the names here are already right. With react-hook-form, register company.name and address.city directly, read the whole object with watch() and build the lines from it; empty strings can be dropped with a transform or a resolver.