Membership and permissions

RoleSelector

RoleSelector — a trigger button and a single-select listbox of roles. Implements keyboard support per the WAI-ARIA listbox pattern, mirroring the roving-focus approach in `ui/Dropdown.svelte`: the trigger opens on ArrowDown/ArrowUp/Enter/Space; the open list moves focus onto the selected (or first) option; ArrowUp/Down/Home/End move roving focus; Enter/Space pick the focused option; Escape closes and refocuses the trigger; Tab closes. Click-outside also dismisses.

Public export

typescript

import { RoleSelector } from '@happyvertical/smrt-ui';

Import path: @happyvertical/smrt-ui
Props: 6
Props described: 6 of 6
Bindable state: 0
Callback events: 1
Verified release: 0.44.0

Props

NameTypeRequiredDescription

rolesRole[]YesThe available roles to choose from.

valuestring | nullNoThe currently selected role ID.

onchange(roleId: string) => voidYesFired when a role is selected, passed the role ID.

disabledbooleanNoBlocks opening the role list.

placeholderstringNoPlaceholder text shown when no role is selected.

showDescriptionbooleanNoShows role descriptions in the dropdown options.

Bindable state

This component has no bindable public state.

Callback events

onchange(roleId: string) => void

Public export

Props

Bindable state

Callback events

Examples and explanation