Permission Checklist Grouped

ProNew

A searchable permission list grouped by resource where each group toggles all of its permissions with a mixed state and shows what each permission allows. Use this when people build a custom role or API key scope.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

disabled

Guide and examples

When to use it

Use it for custom roles and API tokens with dozens of permissions across a few resources, where "everything on projects" is one action and "delete members" must be found by search.

Do not use it when there are fewer than ten permissions. Use plain checkboxes in a fieldset.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`groups`	`{ id, label, permissions: { value, label, description? }[] }[]`	-	Resources and their permissions.
`value`	`string[]`	-	Granted permission values (controlled).
`defaultValue`	`string[]`	`[]`	Initial grants.
`onValueChange`	`(value: string[]) => void`	-	Runs on every change.
`disabled`	`boolean`	`false`	Disables the button.

Accessibility

Each group has a first option, All <resource> permissions, with aria-checked set to true, false or mixed.
Permission options carry aria-checked; the list is aria-multiselectable.
The button's name carries the totals so the state is known before opening.
Search matches the permission name, its description and the resource.

Testing

The pattern ships with a Testing Library test (permission-checklist-grouped.test.tsx) that covers group toggling, the mixed state, the totals and searching by description.