API Scope Picker

ProNew

A grouped scope picker where sensitive scopes show a warning and the Authorize button stays off until the person confirms they understand. Use this when granting an app or token access needs informed consent.

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.

appName

Guide and examples

When to use it

Use it for OAuth consent screens, personal access tokens and app install flows.

Do not use it for permissions of your own team members (use role-permission-tree) or when there is only one scope.

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
`scopes`	`TreeNode<Scope>[]`	-	Scope groups with leaves; sensitive ones have `data.sensitive`.
`appName`	`string`	-	Who is asking.
`defaultValue`	`string[]`	`[]`	Scopes ticked at the start.
`onAuthorize`	`(scopes) => void`	-	Called with the ticked scopes.

Accessibility

"Sensitive" is text in the row's name, not only colour.
The warning is a labelled group; its checkbox has a visible label; the button is disabled until it is checked.
Unticking the last sensitive scope removes the warning and resets the confirmation.

Testing

The pattern ships with a Testing Library test (api-scope-picker.test.tsx) that covers the plain path, the empty state, the sensitive confirmation and resetting it.

Guide and examples

When to use it

Use it for OAuth consent screens, personal access tokens and app install flows.

Do not use it for permissions of your own team members (use role-permission-tree) or when there is only one scope.

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
`scopes`	`TreeNode<Scope>[]`	-	Scope groups with leaves; sensitive ones have `data.sensitive`.
`appName`	`string`	-	Who is asking.
`defaultValue`	`string[]`	`[]`	Scopes ticked at the start.
`onAuthorize`	`(scopes) => void`	-	Called with the ticked scopes.

Accessibility

"Sensitive" is text in the row's name, not only colour.
The warning is a labelled group; its checkbox has a visible label; the button is disabled until it is checked.
Unticking the last sensitive scope removes the warning and resets the confirmation.

Testing

The pattern ships with a Testing Library test (api-scope-picker.test.tsx) that covers the plain path, the empty state, the sensitive confirmation and resetting it.