Role Picker Permissions Preview

ProNew

A role picker that previews the permissions of the highlighted role beside the list, then lists the chosen role's permissions in text. Use this when people assign roles and need to know what each one allows.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

defaultValue

disabled

Guide and examples

When to use it

Use it in invite and member-management screens, where "Editor" or "Billing" means different things in different products and a mistake gives someone too much access.

Do not use it when you have two roles. A radio group with a sentence each is clearer.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`roles`	`{ id, name, description, permissions: string[] }[]`	-	The roles.
`value`	`string`	-	The chosen role id (controlled).
`defaultValue`	`string`	-	Initial role id.
`onValueChange`	`(id: string) => void`	-	Runs when a role is picked.
`disabled`	`boolean`	`false`	Disables the button.

Accessibility

The button is a combobox; its name is the role name.
Each option reads as the role name, its one-line description and N permissions.
The side preview follows the highlighted option for sighted pointer and keyboard users and is aria-hidden: the same permissions appear as a normal list under the button after choosing.
The preview needs room: on narrow screens it is hidden and the descriptions carry the meaning.

Testing

The pattern ships with a Testing Library test (role-picker-permissions-preview.test.tsx) that covers the preview following the highlight, the permission count in the option and the chosen role's permission list.