shadcn.io is not affiliated with official shadcn/ui
Conditional Fields Expense Form Block for React Aria
An expense claim whose fields follow the category: Travel asks from, to and distance, Meals asks attendees and a receipt number, Other asks for an explanation, in a held-height group.
Installation
Overview
Ask only for what applies with this conditional fields form for React with React Aria. A compact header sits over a hairline frame with a plus mark on each corner. Category, Amount and Date are always there as label-and-control rows; under them the group for the chosen category. Travel asks From, To and Distance, Meals asks Attendees and a Receipt number, and Other asks for an Explanation in a Textarea. The three groups share one grid cell sized to the tallest, so changing the category moves nothing, and the groups you are not looking at are inert: they keep what you typed and come back with it. A line under the fields lists what will be saved and names the typed values of the other groups that will be left out. Fields check when you leave them and when you press Submit claim, which puts focus on the first problem. It's built from Select, Input, Textarea, Field, Shine Button and Guides. For expense claims, support requests, intake forms and any form with a type that decides the rest.
FAQ
How do I add a category or a field?
Add the category to CATEGORIES and a group to GROUPS with the ids of its fields, then add the rows in a new pane and the rules in problemsOf. fieldsOf and the "Will be saved" line read GROUPS, so they follow. Only the fields of the chosen category are checked and saved.
What happens to what I typed in a group I switched away from?
It stays in state and returns if you switch back, but it is left out of what will be saved, and the line under the fields says which typed values are being left out. If you would rather drop them, clear those keys in the category's change handler.
How does it work with a keyboard and a screen reader?
Every field has a label and a hint, and a problem is tied to its field. The groups you cannot see are inert and hidden from assistive technology, so Tab and a screen reader meet only the fields that apply. The foot says "Showing the Meals fields." when the category changes; a failed submit puts focus on the first field with a problem.
How does it look on a phone?
The rows stack with the hint under each label. The group cell is as tall as the tallest group, so the foot stays where it is, and the foot is pinned to the bottom of the screen with the button at full width.
What stays local, and how do I connect it for real?
Nothing is sent: the foot says "Claim checked in this demo. Nothing sent." Date limits use a typed AS_OF. In your app, send the category and only the fields of its group, and validate the same rules on the server with the category as the discriminator.