shadcn.io is not affiliated with official shadcn/ui
Select With Icons Alert Order Form Block for React
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.
Installation
Overview
Set the order an on-call person is reached in with this select-with-icons form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner. Two steps sit on a vertical rail with a numbered marker each: "First alert via" and "If no answer, then", each a Select of the same five ways (Email, SMS, Phone call, Chat message and Push) with an icon beside every word. The two cannot repeat: in the second list the first choice is disabled and says "Already the first choice" beside its name, and changing the first to the way picked second clears the second and says so in the foot. One sentence reads the order back ("Phone call first, then SMS"). Save order is quiet until something changes, and pressing it with no second way names the problem under that select and puts focus on it. It's built from Select, Field, Shine Button and Guides, with a CSS entrance only. For escalation policies, notification routing, fallbacks and any form where two choices come from one list.
FAQ
How do I change the ways to reach someone?
Edit CHANNELS (a label and a value each) and give each value a branch in ChannelGlyph, which draws its icon. Both selects, the sentence, the disabled option and the foot's notes read the same list. For more than two steps, repeat the step on the rail and pass every earlier choice as blocked; the rail lines are drawn by each step's own before and after.
How does the exclusion work, and what is said?
The second select is given the first's value as blocked: that option is disabled and carries its reason in text ("Already the first choice"), so it is never only greyed out. If the first select is changed to the way the second already holds, the second is emptied and the foot says "Second way cleared: SMS is now first." The sentence under the rail then asks for a new second way, and the foot's status line is the one polite message.
How do the selects work from the keyboard?
Each trigger opens with Enter, Space or the arrow keys, typing a letter on a closed trigger jumps to a way that begins with it, and Escape closes the list with focus back on the trigger. A disabled option is skipped by the arrows. Each trigger is named by its label, "First alert via" and "If no answer, then". The step numbers are decoration and hidden from assistive technology; the labels carry the order.
Why can I press Save order when nothing changed?
A disabled button gives no reason. Save order stays pressable and quiet: with no changes it says "No changes to save." in the foot, and with no second way it says "Not saved. Choose a second way first.", shows "Choose a second way." under the select and moves focus to it.
What stays local, and how do I connect it for real?
Nothing is saved: Save order says "Order set in this demo. Nothing was saved." Replace the body of submit with a call that stores both ways on your server, and repeat the exclusion there, because a client check is not a rule. With react-hook-form or TanStack Form keep the two values as two fields and validate "second differs from first" in one place.
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
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
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
Notification Channels Settings
Alerts and auditA destinations window for alerts: a rail of Slack, email, PagerDuty, webhook and SMS destinations with a status word, beside the chosen one's routing by severity, a pause switch and a simulated test.
- 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.