shadcn.io is not affiliated with official shadcn/ui
Accordion Expand Stepper Block for React
A five-row grant application in one accordion, where the open row holds its fields, finished rows fold to a one-line summary with Edit, and later rows are locked with the row that opens them.
Installation
Overview
Fold a long application into rows that open one at a time, with this accordion expand stepper for React with Base UI. A plus-marked panel holds one Accordion of five rows: Applicant, Project, Budget, Referees and Submit. The open row shows its fields, made from Input, Number Input and Select, with the block's one Shine Button at its foot. Continue checks the row and folds it to a single line of what you typed, with a check and an Edit label, then opens the next. Rows ahead show a lock and the row that opens them ("Opens after Budget"). Every open row has the same height, so the panel never moves. A foot line says "Section 2 of 5: Project" and counts the rows done.
FAQ
How do locked rows and Edit work?
Only one row is open at a time, and a row is enabled once the row before it has been finished. A finished row can be opened again with its Edit label; finishing it then returns you to the furthest row you had reached. Locked rows are real disabled accordion items, so they are skipped by Tab and announced as unavailable.
What does Continue check?
Each row has small check functions near the top of the file: a business name and an email, a project title, an amount between $1,000 and $25,000, and a referee who is not the applicant. A miss writes one line under the field and moves focus to it. The summary on a folded row is worked out from the values by summaryOf.
What stays local, and how do I make it real?
Everything. The answers live in component state, and Submit application ends on a line that says "Held in this demo: nothing was sent". To make it real, send answers from the carryOn handler on the last row to your API and show its reply in place of that line.
How does the keyboard work?
Tab reaches each enabled row heading, and Enter or Space opens it. Move between row headings with Tab, as this library has no arrow-key model for accordions. Fields in closed rows are not in the Tab order.