shadcn.io is not affiliated with official shadcn/ui
Study Picker Survey Contact Block for React
A research panel sign-up on ruled bands: an age select and a five-star app-comfort question, three paid studies as checkbox rows that switch off with a reason, and a running total of studies, minutes and pay.
Installation
Overview
A research sign-up for React with Base UI, laid out on ruled bands. A start-aligned header sits over a form whose first band holds two screening questions side by side: an age group in a Select, and how comfortable the visitor is with apps in five named stars. The second band lists three paid studies as checkbox rows with their minutes and pay. Each row says in words whether it is open ("Open to you: ages 18 and over"), and the answers can rule a study out: it is switched off with the reason in the same space, so nothing moves, and a study that was ticked is unticked with a polite announcement. The last band holds an email field, a live total ("2 studies, 55 minutes, $60") and the Shine Button. Submitting checks every field and focuses the first problem; a valid request turns into a confirmation that lists the studies. It's built from Select, Rating, Checkbox, Field, Input, Guides, Shine Button and Button, with your theme's tokens for every colour. The studies, minutes and pay are example data. For research panels, user-testing recruiters and any sign-up where eligibility decides what is offered.
FAQ
How does a study become unavailable?
Each study in STUDIES has a minimum age and a minimum comfort rating. Once both questions are answered, stateOf checks them: a row that fails is disabled and its line says why ("Not open to you: it needs ages 35 and over."). Before both are answered every row waits with "Answer the two questions above to check." Change the numbers and the wording follows.
What happens to a study I had ticked when my answer changes?
It is unticked, because it no longer qualifies, and a polite line announces which one ("Banking app walkthrough unticked: no longer open to you."). The total updates at the same time.
Why doesn't the page move as the rows change?
Every wording a row can show sits in one grid cell, and the unseen ones are invisible, so the cell is always as tall as the longest. Only the text and the tone change.
How is the total worked out?
From the ticked studies: the count, the sum of minutes and the sum of pay, in one line that screen readers hear as it changes. The figures in STUDIES are examples; replace them with your own.
Where does the request go?
Nowhere yet. The submit waits 800 milliseconds as a stand-in for a request, then shows a confirmation that lists the studies and the email; it does not claim anything was booked. Replace the timer in submit with your call: details holds the age group, the rating, the studies and the email.
Related
- Pro
Star Rating Feedback Contact
Support and feedbackA product feedback form for a roadmap tool in a card in card: five named stars with a word that follows the choice, switch-on topic chips and a message, ending in a confirmation that lists what was chosen.
- Pro
Permissions Matrix Testimonial Contact
Support and feedbackA story form for a plant subscription: the quote, name and role, one circular photo, and a checkbox matrix that says where the words may be used and whether with the name or photo.
- Pro
Shift Picker Volunteer Contact
Events and datesA volunteer sign-up on ruled bands: four days of shift cells with spots left, skills as toggles, a commitment control and a form that confirms in place.
- Pro
Ranked Interview Slots Contact
Calls and meetingsAn interview scheduler where the candidate ranks up to three of eight offered times, reorders them with buttons, and picks a time zone from a searchable list, in two cells that share their hairlines.
- Pro
Eligibility Checklist Scholarship Contact
ApplicationsA scholarship application on a card in card: four eligibility criteria as ruled checkbox rows with a verdict line, an essay with a word count that fills a bar toward its minimum, and a form that checks itself and confirms in place.
- Pro
Class Queue Waitlist Contact
Events and datesA waitlist for full classes: three session cells with the queue drawn as dots, your place shown when you tick one, and a form that confirms your place in place.