shadcn.io is not affiliated with official shadcn/ui
Shift Picker Volunteer Contact Block for React
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 Base UI, 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.
Related
- 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.
- Pro
Intent Router Nonprofit Contact
Join and giveAn "I want to" router for a charity: four radio tiles (donate, volunteer, partner, fundraise), and one form whose first fields change with the choice while the panel keeps its height.
- Pro
Amount Presets Donation Contact
Join and giveA donation card in card: amount presets in a 2x2 grid beside a custom amount, a monthly switch, an impact line that rolls with the amount, a card-fee box and a total the button repeats.
- Pro
Volunteer Hours Ring Team
Interests and clubsA ring of 1,200 of 1,500 volunteer hours with a band of totals, next to eight activity rows showing the organisation, the volunteers as overlapping initials and the hours, all added up from the data.
- Pro
Pledge and Causes Charity Giving About
Principles and processA split about a company's giving: the pledge as a percent of revenue and the matching rule at the start; five causes with progress toward what each was promised and a participation figure at the end.
- 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.