RolePicker

Single or multi-select role picker for invite flows, member edit, and permission assignment.

#Default usage

<RolePicker
  options={[
    { id: "admin", label: "Admin", description: "Full workspace access" },
    { id: "member", label: "Member", description: "Standard product access" },
    { id: "viewer", label: "Viewer", description: "Read-only access" }
  ]}
  defaultValue="member"
/>

#Import

import { RolePicker, type RolePickerOption } from "@froggdesign/enter-ui-react";

#Accessibility

Picker root uses radiogroup (single) or listbox (multi). Options expose aria-checked (single) or aria-selected (multi) and aria-disabled. The search box is a labelled searchbox.

#API

• options: { id, label, description?, badge?, count?, disabled? }[].
• value / defaultValue + onValueChange: string for single, string[] for multi.
• multiple: enables multi-select mode and switches role/listbox semantics.
• searchable: enables the search box (auto when options exceed 6).
• disabled: dim the picker.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.