shadcn.io is not affiliated with official shadcn/ui
Task Status Select Form Block for React
A 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.
Installation
Overview
Move one task to a new status with this select form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner. The first band is a drawn task row (a glyph tile, the title, its number and a badge with the current status in a glyph and a word); the second is a label-and-select row with a Select of five statuses (Backlog, In progress, In review, Blocked and Done), each with its own glyph, and no default, so it opens on its placeholder. Once a status is chosen one sentence says what will happen ("Move 'Fix login redirect' from In progress to In review"), and Move task changes the badge on the row. Pressing Move task with nothing chosen says "Choose a status" under the select and puts focus on it, and choosing the status the task already has says so instead of moving it. After a move the select goes back to its placeholder so the block can be run again. It's built from Select, Field, Badge, Shine Button and Guides, with a CSS entrance only. For task trackers, issue boards, order screens and any form that changes one record's state.
FAQ
How do I change the statuses and the task?
Edit STATUSES (a label and a value each) and TASK. The glyphs come from StatusGlyph, one drawing per status value, so a new status needs a branch there. The sentence, the badge and the list all read the same two lists, so nothing is typed twice. Keep the labels distinct at the start of the word if you want typing a letter to land on one status.
Why does it start with nothing chosen?
A default hides the decision: the task already has a status, and the form's job is to pick a different one. The select has no value until you choose, so Move task has something to refuse. Pressing it empty says "Choose a status" in words next to a warning icon, repeats it in the foot's status line and moves focus to the select, and choosing the task's current status is also refused, with its own sentence.
How does the select work from the keyboard?
The trigger opens with Enter, Space or the arrow keys, and typing a letter on the closed trigger jumps to a status that begins with it. Escape closes the list with focus back on the trigger. The trigger is named by its label, "Move to". The glyph is never the only sign: every status is its word too, and the badge carries "Status:" for a screen reader.
What stays local, and how do I connect it for real?
Nothing is saved: Move task changes the row in the page and says "Moved to In review in this demo. Nothing was saved." Replace the body of submit with a call that moves the task on your server and set the row's status from its answer; if it fails, keep the choice, show what failed in the status line and offer the same button again.
How do I connect it to react-hook-form or TanStack Form?
The value is one string, the status. With react-hook-form, use Controller and call field.onChange with the value from the select's change handler, and set the error from the form's own errors. With TanStack Form, make the field required and show its message in the same slot; the slot is always reserved, so the message never moves the row.
Related
- Pro
Grouped Person Select Form
SelectsA 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.
- 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
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
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.