Permissions Role Picker

option-card-ui radio-ui select-ui field-ui

Surface for assigning a role — at invite time, when promoting an existing member, or when editing a row in a members table. Two shapes: a rich radio group with role descriptions (settings-page or invite flow), and a compact select for inline edits inside a member row.

When to use

Use the rich radio group when the user is making a deliberate role decision — invite, promotion, role change inside a drawer. Use the compact select when the role is a column inside a table and the user is sweeping through many rows. Both pull from the same role list, but the surfaces have different rhythms.

Rich radio group

Each role gets an option-card-ui with name, one-line description, and (optionally) a "recommended" badge. Default selection lands on the lowest-privilege role — promote-by-decision, not by accident.

Admin Recommended for leads

Compact select (table inline)

Used inside a members table. The select replaces the static role tag on row-hover, or stays inline when the table is in edit mode. Falls back to a non-interactive tag-ui when the current user can't change roles.

Kim Granlund kim@example.com

Composition rules

See also