Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Stacked Sections Intake Form Block for React

A new-patient intake form in four ruled bands with a completion count each, and a pinned bar that says how many required fields remain and a Next required button that focuses the next empty one.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Help someone finish a long form without hunting for what they missed, with this stacked sections form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner. Four bands, each opened by a rule, hold a new-patient intake: Personal (name and date of birth), Contact (mobile number and emergency contact), Visit (a Select for the surgery and a reason in a Textarea) and Consent (two Checkboxes, one required). Each band's heading counts its required fields done and shows a check when they all are. A bar pinned at the foot reads "7 required fields to go" and holds Save intake and a Next required button, which focuses the first empty required field and brings it into view clear of the bar. Save intake with fields remaining says how many and focuses the first. The Shine Button is the only colored control. It's built from Input, Textarea, Select, Checkbox, Button, Shine Button and Guides, with a CSS entrance only. For intake, onboarding and application forms long enough to scroll.

FAQ

How does Next required find the field?

Every required field has a check in okOf, and ORDER lists them in page order. Next required takes the first one that is not filled, sets focus on its control with an effect, and the browser scrolls it into view; each row has a scroll margin so it stops clear of the pinned bar.

How do I change the fields or the bands?

A band is its heading row plus a grid of rows, and its fields are listed in a constant (PERSONAL, CONTACT, VISIT, CONSENT) that the count reads. Add a field to the form, to ORDER, to okOf, to ASKS and to its band's list.

Why does the date of birth use a native date field?

A birth date is typed by many people from their documents, and the native control gives each phone its own picker and each browser its own order. The block fixes the upper limit to the demo's date, so a date in the future is a problem.

How does it look on a phone?

The bands stack, the two-column rows become one column, and the bar stays pinned at the bottom with the two buttons side by side.

What stays local, and how do I connect it for real?

Nothing is saved: the foot says "Intake saved in this demo. Nothing was sent." To make it real, post the draft from the submit handler, check it again on the server and show the answer in the status line.

How do I connect it to react-hook-form or TanStack Form?

With react-hook-form, use Controller for the select and checkboxes and keep the draft in the form's values; move okOf into a resolver or schema and read the count from the form's errors.
All 100 form blocks