shadcn.io is not affiliated with official shadcn/ui
Branching Permit Application Form Block for React Aria
A street-event permit application where the first answer, individual, business or nonprofit, decides the steps, with Back that keeps both branches' values and a review of the path taken.
Installation
Overview
Let the first answer change the road with this branching form for React with React Aria. A compact header sits over a hairline frame with a plus mark on each corner: a progress band that lists the steps, and one step at a time under it. "Who is applying?" offers Individual, Business and Nonprofit as radio rows, and the steps follow: Individual is Applicant, Your details, Review; Business is Applicant, Company, Contacts, Review; Nonprofit is Applicant, Organisation, Review. The heading row reads "Step 2 of 4: Company" at every width, and the list itself shows from sm. Continue checks only the step in view and puts focus on its first problem; Back keeps what was typed, including the other branches' values, which come back if the first answer changes. The review lists only the branch taken, and the primary button becomes Submit application there. It's built from Input, Field, Button, Shine Button and Guides. For permits, applications, onboarding and any flow where an early answer changes what follows.
FAQ
How do I add a path or a step?
Add the kind to KINDS, list its step ids in stepsOf, and add a pane, its fields in fieldsOf and its rules in problemsOf. The progress list, the "Step n of m" line, the review and the validation all read those helpers. A new step id needs a title in TITLES.
What happens to my answers if I change the first answer?
They are kept. All the fields live in one state object, and each path reads only its own, so going back, choosing Business instead of Individual and returning to Individual later finds the first values still there. The review shows only the path taken, so nothing from the other branch is shown or sent.
How does it work with a keyboard and a screen reader?
The first step is a group of radio rows, moved with the arrow keys. Each step's heading takes focus when it appears, and the foot, the one live region, says the step ("Step 2 of 4: Company."). The current step is marked aria-current="step", and the steps you cannot see are inert. Continue checks that step only, and a failed press focuses the first field with a problem.
How does it look on a phone?
The step list gives way to the "Step 2 of 4: Company" line, Back and Continue sit in a two-column row in the pinned foot, and the step panes share one cell, so the foot does not move between steps.
What stays local, and how do I connect it for real?
Nothing is sent: the foot says "Submitted in this demo. Nothing sent." The checks are formats only, and a company or charity number is not looked up. In your app, send the kind and the fields of its path as a discriminated union, and check them again on the server.