RoleSelector

Select user roles with descriptions for assignment and permission management.

Installation

typescript

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

Basic Usage

Selected: (none)

svelte

<script lang="ts">
  let selectedRole = $state('');
  const roles = [
    { id: 'admin', name: 'Administrator', description: 'Full system access' },
    { id: 'editor', name: 'Editor', description: 'Can edit content' },
    { id: 'viewer', name: 'Viewer', description: 'Read-only access' }
  ];
</script>

<RoleSelector
  {roles}
  bind:value={selectedRole}
  onchange={(roleId) => (selectedRole = roleId)}
/>

Props

Prop	Type	Default	Description
`roles` *	`Role[]`	-	Available roles
`onchange` *	`(roleId: string) => void`	-	Callback when role changes
`value`	`string \| null`	-	Selected role ID (bindable)
`disabled`	`boolean`	`false`	Disable selection
`placeholder`	`string`	-	Placeholder text when no role selected
`showDescription`	`boolean`	-	Show each role description in the list

TypeScript

typescript

import type { Role } from '@happyvertical/smrt-users';

interface Props {
  roles: Role[];
  onchange: (roleId: string) => void;
  value?: string | null;
  disabled?: boolean;
  placeholder?: string;
  showDescription?: boolean;
}