Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Tab Navigation Stepper Block for Solid

A four-tab sailing race entry on an underlined band where one line slides to the current tab, done tabs show a check, and Continue checks the boat has room for the crew.

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

Turn a short form into a row of tabs that remembers where you are, with this tab navigation stepper for Solid with Ark UI. A plus-marked panel holds a title and "Step 2 of 4" over a Steps band of four tabs: Boat, Crew, Course and Review. One line under the band slides to the current tab, tabs you have finished show a check, and later ones stay off until you reach them. Each tab asks one thing: a Select of boat class, a Tags Input of up to four crew names, a Radio Group of three courses and a Data List read-back with the entry fee. Continue on the Crew tab checks that the boat has room for the crew you named. The foot has an outline Back and the block's one Shine Button. On a phone the tabs scroll sideways and the current one is brought into view.

FAQ

How does the line slide, and can I change the number of tabs?

The line is one element a quarter of the band wide, moved by whole widths with a CSS transform, and in a right-to-left layout it moves the other way. STAGES lists the tabs, and the LINE array holds one transform per tab; for five tabs make the line a fifth wide and add a fifth entry. Under reduced motion the line jumps without a transition.

What does the crew check do?

Each boat class in DINGHIES has a number of seats, the helm included. Continue on the Crew tab compares the crew you added with the seats left, and if there are too many it says how many to remove and moves focus to the crew field. The Tags Input holds up to four names, trims duplicates and adds a name on Enter, on a comma or when the field loses focus.

What stays local, and how do I make it real?

Everything. The choices live in component state and the last button ends on a card that says "Entered in this demo": nothing is sent and no fee is taken. To make it real, send boat, crew and course from the advance handler on the last tab to your entry API.

How does the keyboard work?

The tabs are one tab stop on the current one. Arrow keys move between the tabs you can reach, Home and End jump to the first and last, and Enter or Space opens the focused one; in a right-to-left layout the horizontal arrows swap. Tabs ahead of the furthest reached are disabled, so the only way forward is Continue.

Where does focus go after a move?

Nothing takes focus on load. After Continue, Back or a press on a reached tab, focus goes to the new step's heading, and a polite line in the foot says "Step 3 of 4: Course". If a check fails, focus goes to the crew field and the line says what to fix.

How does it look on a phone?

The band keeps the width of four tabs and scrolls sideways inside its own row, snapping to each tab, while the title and step count stay put above it. Every panel has the same minimum height, so the foot does not jump as you move.

All 100 stepper blocks