Skip to content
EspañolEnglish
All components (244)

People's roles

Management · UserRoleEditor

What it is and when to use it

The people with access to something and the role of each one: change the role, search by name or email and remove access with confirmation.

When to use it

  • The members screen of a project, a company or a shared space.
  • roles are the possible roles, each with a line of what it can do (description), shown in the dropdown.
  • onRoleChange changes a role; onRemove, if passed, removes access after confirming it. A person with locked (the owner, whoever is editing) is not touched.
  • The search appears on its own with more than eight people (searchable forces it).

When not to

  • Editing what each role can do: PermissionMatrix.
  • Inviting someone new: a separate form; here only those who already have access are managed.
  • It grants nothing by itself: the server decides whether the change is valid.

Keyboard: each row has its dropdown and its remove button; removing asks for confirmation.

Accessibility: each dropdown is named after the person ("Role of Pablo Sanz") and each change is announced; a failure is said in an alert.

Fine appearance: a bordered list; on a narrow screen the dropdown moves to its own line.

What it looks like

3 people
  • Aitor Mena
    Cannot be changed
    AdministratorSees and changes everything
    ManagerOrders and customers
    Read only
  • Marta Ruiz
    AdministratorSees and changes everything
    ManagerOrders and customers
    Read only
  • Lucía Ferrer
    AdministratorSees and changes everything
    ManagerOrders and customers
    Read only

<UserRoleEditor
  label="Who can sign in"
  users={usuarios}
  roles={roles}
  searchable
  onRoleChange={cambiarRol}
  onRemove={quitarUsuario}
/>

Props

Import it with import { UserRoleEditor } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
labelrequiredstringWhich access is being edited («Project people»). Required.
onRoleChangerequired(userId: string, role: string) => void | Promise<void>Change a person's role. If it throws or rejects, it says so and the role stays as it was. The server decides whether it can be done.
rolesrequiredreadonly RoleOption[]—
usersrequiredreadonly RoleUser[]—
classNamestringMerged with the library classes; it does not replace them.
onRemove(userId: string) => void | Promise<void>Remove a person's access, with confirmation. Without it, nobody can be removed.
searchablebooleanA field to search by name or email. By default, if there are more than eight people.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: