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} />

Props

Prop	Type	Default	Description
`roles` *	`Role[]`	-	Available roles
`value` *	`string`	-	Selected role ID (bindable)
`onchange`	`(roleId: string) => void`	-	Callback when role changes
`disabled`	`boolean`	`false`	Disable selection

TypeScript

typescript

interface Role {
  id: string;
  name: string;
  description?: string;
}

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