shadcn.io is not affiliated with official shadcn/ui
Instrument Picker Music Contact Block for React
A trial-lesson request for a music school with no frame: a band of five instrument chips, a five-star self-rating with the word beside it, an own-instrument switch and a lesson format.
Installation
Overview
A trial-lesson request for React with Base UI, with no card and no frame: a centred header over a compact form that opens on a band. The band sits under its own rule with a + mark on each rail and holds five instrument chips (piano, guitar, drums, voice, strings), which are native radio buttons, with a line under them describing the one chosen; on a phone the chips scroll sideways. Below it, the visitor rates themselves with five stars and the word beside them changes from Beginner to Advanced, a switch says whether they already own an instrument, a segmented control sets the lesson format, and a name and an email finish the form. Submitting checks every field, shows each problem under its field and moves focus to the first one; a valid request turns into a confirmation in the same space. It's built from Rating, Switch, Segment Group, Field, Input, Guides, Shine Button and Button, with your theme's tokens for every colour. For music schools, tutors, studios and any form that starts by asking what you want to learn.
FAQ
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call (your front desk, a CRM or a form endpoint): details holds the instrument, the rating, whether they own one, the format, the name and the email.
Are the chips real radio buttons?
Yes. Each chip is a label around a native radio input that is visually hidden, so arrow keys move between instruments, a screen reader announces "Piano, radio button, 1 of 5", and the chosen one is drawn in the foreground colour with a focus ring. Edit INSTRUMENTS for your own list: each has a value, a label and the line shown under the band.
How does the star rating work?
The rating is five stars in one control: click one, or use the arrow keys. The word beside them comes from WORDS (Beginner, Some basics, Intermediate, Confident, Advanced) and is read out as it changes, and each star carries its own spoken name such as "3 of 5, Intermediate". The stars use your foreground colour rather than a gold. Nothing is chosen to begin with, and submitting without a rating asks for one.
How does the form check what's entered?
The form has noValidate, so the block shows its own messages. On submit, problems checks that an instrument, a rating and a format are chosen and that the name and email are filled in (the email needs an @ and a domain). Each problem appears under its field with an icon, the control gets aria-describedby, and focus moves to the first one, which can be the first chip. Choosing or typing clears its message.
What does the own-instrument switch do?
It only changes the line under it and the last sentence of the confirmation ("with your own instrument" or "with a rental instrument"). It is drawn in the foreground colour, so the Shine Button stays the only primary control.
How does it fit on a phone?
Below sm the five chips scroll sideways in the band, with the next chip peeking in to show there is more, and the format and the name and email stack one per row. The submit button goes full width. Nothing else scrolls sideways at 320 pixels. The header and the form fade up once on load; with reduced motion they simply appear.
Related
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.
- Pro
Stylist Booking Contact
Visits and servicesA salon booking that starts with the person: three stylists in hairline cells, each with their next three openings as chips, a live appointment line, and a form that checks itself and confirms in place.
- Pro
Weekly Plan Fitness Contact
Visits and servicesAn intro-session request for a gym with a plan that draws itself: a goal as four choice cards, a level, sessions a week, and a framed week whose days light up and whose readout says '3 sessions, 50 minutes'.
- Pro
Request a Callback Contact
Calls and meetingsA callback request with a status band and a form that asks when to ring: as soon as possible, later today from a select of 15-minute times, or on a chosen day, with a time zone.
- Pro
Minimal Contact Form
Contact formsThe calmest contact form, for a mail client: a centred heading and three fields on the page column with inline validation, a message counter and a one-line thank-you.
- Pro
Birthday Room Childcare Contact
Visits and servicesA place request for a day nursery in a card in card: a birthday in a segmented date field names the room the child belongs in, and five day toggles price the week at example rates.