RolePicker

Choosing a role: built-in, then custom, each with one sentence; ungivable roles say why.

Built-in roles

OwnerEverything, including deleting the organizationOnly an owner can make someone an ownerAdmin29 rightsEverything except ownership and deletionBilling8 rightsUsage, costs and the planDeveloper7 rightsCreate projects, see provider keys and usageMember2 rightsSee the organization and its members

Custom roles

Support lead9 rightsRead logs and usage across projects to help customersFinance6 rightsCosts, budgets and invoices

function List() {
  const [role, setRole] = useState("developer");
  return <RolePicker className="w-480" aria-label="Role in the organization" roles={ORG_ROLES} value={role} onValueChange={setRole} />;
}

import { RolePicker } from "@logicplanes/kaeso-ui";

Props

appearance
"list" | "select" = list
A list with each role's description, or a compact select.
aria-label
string
The accessible name, for when there is no visible label.
disabled
boolean
Turns it off: it can't be used, and it looks dimmed.
fullWidth
boolean
Select only: fill the container.
label
string
The select's visible label; a list is named by aria-label or the step around it.
name
string
The field name the value is sent under in a form.
onValueChange
((value: string) => void)
Called with the chosen role's id.
roles
RoleOption[]
The roles to choose from.
size
"md" | "sm" = md
The height of the control.
value
string | null
The chosen role's id, when you control it.