shadcn.io is not affiliated with official shadcn/ui
Grouped Person Select Form Block for Ark UI
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 Ark 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."