shadcn.io is not affiliated with official shadcn/ui
Role Select Login Block for Radix UI
A role chooser after sign-in: three radio rows (Admin, Editor, Viewer) beside a capability matrix whose cells say Can or Cannot in words, re-read as you pick, and one button that continues as the chosen role.
Installation
Overview
Show what a role lets you do before you take it, with this role select login block for React with Radix UI. It's the role chooser of Showcrate, event production software, shown when someone belongs to a company as more than one thing: a compact header over one framed panel with two cells. At the start are three radio rows, Admin, Editor and Viewer, each with a sentence and a count of what it can do; at the end is a capability matrix, a native table of four abilities by three roles, whose cells say Can or Cannot in words beside a check or a cross, never a color. The chosen role's column is ringed and read out under the table in one sentence ("As Editor you can publish run sheets, invite people, and export data. You cannot change billing."). On a phone only the chosen column shows. The one Shine Button names the choice: Continue as Editor. It's built from Shine Button and Guides, with native radio inputs, a native table and a CSS entrance only. For products where one person holds several roles in one company.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The three roles and the abilities each has are typed in one list, the chosen role changes the matrix and the sentence at once, and Continue waits 700 milliseconds and says "Continued as Editor. Nothing was sent." In a product, read the person's roles at that company from your server, show the abilities each role really grants, and start the session with the chosen role.
How is the matrix kept true?
The rows, the columns and the sentence all read the same list: an ability is in a role's list or it isn't. The count in each row ("3 of 4 abilities") and the summary are worked out from it, so editing one role in the data updates every place that mentions it. Each answer is a word and a mark, so it never depends on color alone.
What does the matrix do on a phone?
Four columns would be cramped, so only the chosen role's column shows next to the abilities, and choosing another role swaps the column. From the medium breakpoint all three roles show side by side, with the chosen one ringed.
How do the rows work with a keyboard and a screen reader?
They are native radio inputs in one group named Your roles: arrow keys move between them and Enter sends the form. Each row is read as its role name with the sentence about it as its description, and the matrix is a real table with a caption that names the chosen role, column heads and a row head per ability.
Why show abilities before the choice?
A role name alone ("Editor") means different things in different products. Showing the four abilities side by side lets a person pick the least they need, and the sentence spells out what they will not be able to do, so a missing ability never comes as a surprise after sign-in.