shadcn.io is not affiliated with official shadcn/ui
Grouped Person Select Form Block for React
A select of nine people grouped by team, each with initials, name and duty, beside a week strip that shows that person's hours and marks a week that would pass 40 hours.
Installation
Overview
Give one shift to the right person with this grouped select form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner, in two cells on one hairline. The first holds the shift (Friday 16 October, 16:00 to 23:00, seven hours) with a badge that says Open or who has it, and a Select of nine people in three groups with their counts (Kitchen 3, Front of house 4, Bar 2): each option is the person's initials, name and duty, "Unassigned" sits above the groups, and the closed select echoes initials and name. The second cell is that person's week from typed hours, Monday to Sunday, with Friday's new shift drawn in, one sentence ("Corin has 5 shifts this week; this makes 6") and a line that marks a week that would pass 40 hours with a glyph and the words "Over the 40-hour week". Marking does not block: the visitor can still assign. Assign shift is quiet until the choice changes. It's built from Select, Field, Badge, Shine Button and Guides, with a CSS entrance only. For rotas, task assignment, ticket owners and any form that picks one person from teams.
FAQ
How do I use my own people and hours?
Edit PEOPLE: each has an id, a first name, a name, initials, a duty, a group and days, the hours worked Monday to Sunday. The groups, their counts, the week strip, the sentence and the 40-hour check (WEEK_LIMIT) all come from it, and SHIFT holds the shift's day, length and label. A new group needs a list like KITCHEN and a SelectGroup in the content.
Why doesn't an over-full week stop the assignment?
A rota tool usually allows it and warns, because a manager sometimes has to. The week cell says "Over the 40-hour week: 47 hours with this shift" with a warning icon and the words, so colour is never the only sign, and the foot still says who got the shift. If your rule is a hard limit, return early from submit when isOver(person) and say why in the status line.
How does the select work from the keyboard?
The trigger opens with Enter, Space or the arrow keys; typing a letter on the closed trigger jumps to a person whose name begins with it, across the groups. Escape closes the list with focus back on the trigger. The trigger is named by its label, "Assign to". Each group has a heading with its count, and the duty is in the option's text.
How is the week strip read by a screen reader?
It is a list named "Hours by day" with one item per day, and each item spells the day and the hours ("Friday 16 Oct: +7 hours, the new shift", "Tuesday 13 Oct: 8 hours"). The short day names and the numbers on screen are hidden from assistive technology so nothing is read twice. The strip keeps left-to-right order in a right-to-left page, as a calendar does.
What stays local, and how do I connect it for real?
Nothing is saved: Assign shift says "Saskia has the late shift. Nothing was saved." and updates the badge. Replace the body of submit with a call that assigns the shift on your server, and load the week's hours with it so the strip is never stale. Press it with no change and it says "No change to assign."
Related
- Pro
Task Status Select Form
SelectsA required select of five task statuses, each with a glyph and a word, that moves a drawn task row to the status you choose once Move task is pressed.
- Pro
A combobox of 24 regions that narrows as you type, marks the letters that match, counts the matches and spells out the chosen region, with its facts in a side cell.
- Pro
Multi Select Skills Form
SelectsA combobox that holds up to five of eighteen skills as chips inside the field, says its limit in words and refuses a sixth, and counts the open projects the skills cover.
- Pro
Two selects of the same five ways to reach someone, each with an icon, joined by a rail, where the first choice is out in the second list and a clash clears the second.
- Pro
Time Zone Select Form
Dates and timesA grouped select of sixteen time zones with the offset in each label, a real read of the device's own zone after the page loads, and one sentence saying how far the chosen zone is from it.
- Pro
Ship-To Country Select Form
SelectsA combobox of 20 countries in four areas, each with a two-letter tile and calling code, where four are out of reach with the reason in the row and a band gives what a parcel to the chosen country needs.