shadcn.io is not affiliated with official shadcn/ui
Application Form Stepper Block for Ark UI
A four-step job application on a vertical rail that counts required fields per step, shows an overall completeness bar, and keeps Submit off with each missing field listed as a button that jumps to it.
Installation
Overview
Show people how far along an application is while they fill it in, with this form stepper for React with Ark UI. A hairline frame with plus marks holds a bar that reads "Application 55% complete" over a vertical Steps rail: About you, Experience, Documents and Review, each with its own count such as "2 of 3 required". Every count comes from the real field values, so a name that is one word or an email without an at sign does not count. The steps hold Fields with an Input, a Native Select, a Textarea and a resume File Upload. Next never blocks; a format problem shows in a reserved line under its field once you leave it or press Next. On the Review step the block's one Shine Button, "Submit application", stays off while anything required is missing, the foot says "Missing: Email, Resume." and each gap is a button that jumps to its step and focuses the field. For job boards, grant forms and any long form with a few required fields.
FAQ
How are the counts and the percentage worked out?
REQUIRED lists the six required fields and each step names its own. A field counts when problemOf returns an empty string for it, so the rail, the bar and the gap list all read the same rule. The percentage is the share of the six that pass, rounded. To add a required field, add it to REQUIRED and to its step's required list, and give problemOf a rule for it.
Why is Submit off, and what does it do when pressed?
It is aria-disabled, not removed, so it keeps its place and stays focusable. Pressed while anything is missing, it says which fields in the foot line and moves focus to the first gap button. Each gap button changes to the field's step and focuses the field. The foot line is also the button's description, so a screen reader hears the reason with the label.
Is the resume uploaded?
No. The file picker reads only the file's name, type and size, and a PDF, DOC or DOCX of 2 MB or less is accepted; anything else is named in the line under the drop zone. The file stays in the tab. To make it real, send the File from the accepted handler to your storage and keep the returned id in place of resume.
What stays local, and how do I make it real?
Everything. The values live in component state and "Submit application" ends on a panel that says "Submitted in this demo". To make it real, post values from the submit handler on the last step and show the response in the last panel in place of the sentence.
How does the keyboard work?
The rail is one tab stop on the current step; arrow keys move between the steps you can reach, Home and End jump to the ends, and Enter or Space opens one. Steps ahead of the furthest one reached are off. Enter inside a field is Next. After a move, focus goes to the new step's heading, and a polite line in the foot says what changed.