Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Survey Questionnaire Stepper Block for React Aria

A five-question sleep survey with one question per step, a thin five-segment bar as the step line, choice cards that never advance on their own, and a closing page with a line worked out from the answers.

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

Ask a short survey one question at a time, with this questionnaire stepper for React with React Aria. A hairline frame with plus marks holds a thin bar of five segments that is also the Steps line: the segments for answered questions and the current one fill in foreground tones, and you can press an earlier one to go back. Each step shows "Question 3 of 5", the question as a heading and three choice cards in a Radio Group with no default. Choosing never advances; Next asks for an answer first and says so in a reserved line under the cards. Questions after the first unanswered one stay off. The last Next, "See my answers", opens a list of your answers and one line worked out from them, such as "You mostly answered evenings." For sleep, habit and feedback surveys of a few questions.

FAQ

How is the closing line worked out?

Every question has one choice of each kind: morning, middle of the day and evening. leadOf counts the answers of each kind and returns the kind that leads. If two kinds tie, the line says the answers are mixed. To change the survey, edit QUESTIONS; keep one choice per kind in each, or adjust leadOf.

Why are later segments off?

Each segment past the first unanswered question is disabled, so the only way forward is to answer and press Next. Going back is free, and an earlier answer can be changed without losing the later ones.

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

Everything. The answers live in component state and nothing is sent; the last page says so. To make it real, post answers from the submit handler on the last question and keep the result page for your own thank-you.

How does the keyboard work?

The segments are one tab stop on the current question; arrow keys move between those you can reach. Arrow keys inside the cards move between choices, and Enter anywhere is Next. After a move, focus goes to the new question's heading; pressing Next without an answer moves focus to the cards.

How does it look on a phone?

The same, edge to edge: the segments stay a thin bar, the cards stack and the foot sticks to the bottom of the screen with Back and Next side by side. Each segment is named, so a screen reader hears the question's short title.

Why are the segments not the primary colour?

So the Shine Button stays the one call to action. Filled segments are solid foreground and the rest are the border colour; state also shows in the text above the question.

All 100 stepper blocks