shadcn.io is not affiliated with official shadcn/ui
Shift Picker Volunteer Contact Block for React Aria
A 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.
Installation
Overview
A volunteer section for React with React Aria, laid out as a wide form on ruled bands under a start-aligned header. The first band holds four days in two columns (one on a phone), each a ruled group of shift cells: a checkbox, the shift's name and hours, and a badge with the spots left; a full shift is disabled and says "Full", and a running line counts the shifts picked. The second band asks what you are good at (toggles, several allowed, optional) and how often you can come (Just once, Once a month, Every week). The last band takes name and email. Submitting checks that at least one shift is chosen and that name and email are right, shows each problem and moves focus to the first one; a valid sign-up turns that band into a confirmation in the same space while the shifts stay in view, locked, so the page does not move. It's built from Checkbox, Badge, Toggle Group, Segment Group, Field, Input, Guides, Shine Button and Button, with CSS transitions for the entrance and your theme's tokens for every colour; ticked cells ring in the foreground colour. For parks, food banks, schools and any charity that runs shifts.
FAQ
How do I change the shifts, days and spots left?
Edit DAYS at the top of the file: each day has a name and a list of shifts (an id, a name, its hours and the places left). A shift with spots: 0 is drawn disabled with "Full". The day names repeat weekly, so there are no dates to go stale; if you want dates, add them to each day's name from your scheduling system. The spots are example data here: pass the real ones in.
What does a full shift do for keyboards and screen readers?
Its checkbox is disabled, so Tab skips it and a screen reader reads it as unavailable; the "Full" badge says why. The cell is dimmed but keeps its name and hours readable.
How does it fit on a phone?
The four days stack in one column, each a ruled band with its own heading, and the skills and the commitment follow as two more bands; the name and email band comes last. The whole form stays under three screens at 320 pixels.
What are the skills for?
They are optional: a toggle group of five (trail work, gardening, first aid, kids' groups, driving) that you can press in any combination, kept in the foreground colour when pressed. skills and often are in state for you to send along with the shifts; the confirmation only echoes the commitment.