Access Request Tree

ProNew

A resource tree where people tick what they need access to and must give a reason before the request can be sent. Use this when access is granted on request and approvers need to know why.

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.

minReason15

Guide and examples

When to use it

Use it for just-in-time access, data requests and permission escalation flows that need a reason and an approver.

Do not use it when access is granted without review (use a plain checkbox tree) or when the reason is not needed.

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
`resources`	`TreeNode[]`	-	What can be requested.
`alreadyHave`	`string[]`	`[]`	Ids the person has; shown locked.
`minReason`	`number`	`15`	Minimum characters in the reason.
`onRequest`	`({ resources, reason }) => void \| Promise<void>`	-	Called when the form is valid.

Accessibility

Validation runs after the first attempt; each message is a role="alert" linked with aria-describedby, and the first invalid field gets focus.
The reason field has a visible label and aria-invalid.
Resources the person already has are locked and say so in their name.

Testing

The pattern ships with a Testing Library test (access-request-tree.test.tsx) that covers locked resources, both error messages, focus placement and the final request.

Guide and examples

When to use it

Use it for just-in-time access, data requests and permission escalation flows that need a reason and an approver.

Do not use it when access is granted without review (use a plain checkbox tree) or when the reason is not needed.

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
`resources`	`TreeNode[]`	-	What can be requested.
`alreadyHave`	`string[]`	`[]`	Ids the person has; shown locked.
`minReason`	`number`	`15`	Minimum characters in the reason.
`onRequest`	`({ resources, reason }) => void \| Promise<void>`	-	Called when the form is valid.

Accessibility

Validation runs after the first attempt; each message is a role="alert" linked with aria-describedby, and the first invalid field gets focus.
The reason field has a visible label and aria-invalid.
Resources the person already has are locked and say so in their name.

Testing

The pattern ships with a Testing Library test (access-request-tree.test.tsx) that covers locked resources, both error messages, focus placement and the final request.