Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tabs examples · Advanced

Controlled Tabs for React

Three step tabs held in state, with Previous and Next buttons that move between them.

Framework
UI library

A wizard needs buttons that change the tab, so the selected tab lives in the demo's state instead of inside Tabs. Three steps (Basic Information, Configuration, Review and Confirm) come from one array, and Previous and Next move one step at a time. Use it for onboarding or a multi-step setup where people may still click a step directly.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does this demo control the selected tab?

The selected value is kept in state, starting at step1, and passed back to Tabs. Clicking a trigger or a button writes the same state. Tabs gets value, and onValueChange receives the next value.

When are Previous and Next disabled?

Previous is disabled on the first step and Next on the last. Each button moves one place in the steps array.

Can the reader still click a step?

Yes. The three triggers are not disabled. Clicking one updates the same state the buttons write, so the buttons stay in sync.

Why are the three steps equal width?

TabsList has grid w-full grid-cols-3, so each of Step 1, Step 2 and Step 3 fills a column. The group is w-full max-w-2xl.

Does Next wait for the step to be filled in?

No. The handlers only look at the current step. The panels show labels and hints, not inputs, so nothing is checked before the tab changes. Add your check in the Next handler before you move on.

Would inputs in a step survive switching away?

Not with this file. Inactive panels unmount, so input state inside a step resets on the way back. Set keepMounted on each TabsContent to keep a step mounted.

All 11 tabs examples