Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Multi-Section Tabs Form Block for React Aria

One membership plan form across General, Details and Advanced tabs with a single Save, an Edited note on changed tabs and a problem badge that jumps to the first tab with an error.

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

Keep one form on several tabs without losing track of it with this tabbed form for React with React Aria. A compact header sits over a hairline frame with a plus mark on each corner whose top band is a Tabs list: General, Details and Advanced. All three share one state and one Save. A tab whose fields were changed says "Edited"; after a failed save, a tab that holds problems shows a count Badge and describes the problems to assistive technology. Save plan moves to the first tab with a problem and puts focus on its field, so an error on a tab you are not looking at is never missed. The tabs hold fields, a billing cycle select and two switches, and the Shine Button is the only colored control. On a phone the tab names stay in one row and "Edited" shrinks to a dot. It is built from Tabs, Badge, Input, Native Select, Switch, Textarea, Shine Button and Guides. For plan, product and settings editors where one Save covers several panels.

FAQ

How do I add a tab?

Add a Pane (an id, a title and the names of its fields), a TabsTrigger with its TabLabel, a TabsContent with the fields, and a rule in problemOf for each field that can be wrong. The Edited note, the problem count and the jump on a failed save all read from the pane's field list.

How does Save find the right tab?

problemsOf returns every problem in tab order, paneOf maps the first one to its tab, and Save selects that tab and focuses the field a moment later, once the panel is on the page. Typing in a field with a problem clears just that problem, and the badge count follows.

What happens to the fields on a tab I leave?

Their values live in the form's state, not in the panel, so leaving a tab never loses anything, even where the library removes inactive panels. The Edited note compares each pane's fields with the last saved values.

How does it work with a keyboard and a screen reader?

It is a real tab list: arrow keys move between tabs and the panel follows. Each tab is tied to a screen-reader-only line with aria-describedby that reads "2 problems, edited." The visible badge and Edited note are hidden from assistive technology so they are not read twice. The foot status is the one polite region.

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

Save plan says the plan was saved in this demo and sends nothing. To make it real, post the values from the submit handler when problemsOf returns nothing and write server errors into the same slots.

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

With react-hook-form, use one useForm for all tabs and count formState.errors by pane; call setFocus on the first error's field after selecting its tab.
All 100 form blocks