shadcn.io is not affiliated with official shadcn/ui
Survey Form Block for Radix UI
A six-question course survey with a pinned progress band, a jump to the next unanswered question, a 0 to 10 slider that reads Not rated until moved, and the answers echoed back on send.
Installation
Overview
Gather feedback in one sitting with this survey form for React with Radix UI. A compact header sits over a hairline frame with a plus mark on each corner. A progress band stays pinned to the top as you scroll, reading "3 of 6 answered" (worked out from the answers) over a thin bar, with a button that jumps to the next unanswered question. Six questions follow, each a fieldset with a legend: satisfaction in five words, the parts you used as checkboxes, usefulness on a 0 to 10 Slider that reads "Not rated" until it is moved, the pace, what to change in a Textarea, and whether you would recommend it. Send feedback with gaps says how many questions remain and focuses the first; with none, the answers appear back in place of the questions and the page keeps its height. The Shine Button is the only colored control. On a phone the band and the foot both stay pinned. For course and event feedback, research questionnaires and any form of several short questions.
FAQ
How do I change the questions?
QUESTIONS lists each question's id and title, option lists such as SATISFACTION and PARTS hold the choices, and answeredOf says when a question counts as answered. Add an entry, its Ask block with the control, a field in Answers, and a line in echoOf for the result.
How is progress worked out?
The count is not stored: every render counts the questions answeredOf accepts, so changing an answer back to empty lowers it again. The slider counts only after it is moved, because a slider always has a position, and the text says "Not rated" until then.
What does the jump button do?
It focuses the first unanswered question's fieldset, which scrolls under the pinned band without hiding it. When everything is answered it says so. Send feedback does the same when it is refused, and adds "2 questions to answer." to the foot.
How does it work with a keyboard and a screen reader?
Each question is a fieldset with a legend, so a screen reader announces the question when focus enters it. The options are native radios and checkboxes, so arrow keys and Space work as in any form, and the slider has its own name and a spoken value such as "7 of 10". The foot status is the one polite region.