Reviewers Required Optional

ProNew

A reviewer list where each person is Required or Optional, added from a searchable list, changed with a two-button toggle and checked by a rule that at least one reviewer must be required. Use this when approvals need some people and only inform others.

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.

minRequired1

max1

Guide and examples

When to use it

Use it for pull requests, document approvals and change requests, where the difference between someone whose approval is needed and someone who is just informed must be explicit and enforced.

Do not use it when everyone has the same role. Use a plain multi-select of people.

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
`people`	`{ id, name, avatarUrl? }[]`	-	Who can review.
`value`	`{ id, required }[]`	-	The reviewers (controlled).
`defaultValue`	`{ id, required }[]`	`[]`	Initial reviewers.
`onValueChange`	`(reviewers, valid: boolean) => void`	-	Runs on every change; `valid` is false when nobody is required.
`minRequired`	`number`	`1`	Fewest required reviewers.
`max`	`number`	-	Most reviewers.

Accessibility

Reviewers are a list; each row has a ToggleGroup named Review type for Ada with Required and Optional.
When fewer than minRequired reviewers are required, a role="status" line says Add at least 1 required reviewer. and the list is flagged aria-invalid.
People already added are not offered again; max disables the Add button with the reason in text.
Removing the only required reviewer is allowed; the rule line explains the consequence.

Testing

The pattern ships with a Testing Library test (reviewers-required-optional.test.tsx) that covers adding, switching required, the rule message, no duplicates and removing.

Guide and examples

When to use it

Use it for pull requests, document approvals and change requests, where the difference between someone whose approval is needed and someone who is just informed must be explicit and enforced.

Do not use it when everyone has the same role. Use a plain multi-select of people.

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
`people`	`{ id, name, avatarUrl? }[]`	-	Who can review.
`value`	`{ id, required }[]`	-	The reviewers (controlled).
`defaultValue`	`{ id, required }[]`	`[]`	Initial reviewers.
`onValueChange`	`(reviewers, valid: boolean) => void`	-	Runs on every change; `valid` is false when nobody is required.
`minRequired`	`number`	`1`	Fewest required reviewers.
`max`	`number`	-	Most reviewers.

Accessibility

Reviewers are a list; each row has a ToggleGroup named Review type for Ada with Required and Optional.
When fewer than minRequired reviewers are required, a role="status" line says Add at least 1 required reviewer. and the list is flagged aria-invalid.
People already added are not offered again; max disables the Add button with the reason in text.
Removing the only required reviewer is allowed; the rule line explains the consequence.

Testing

The pattern ships with a Testing Library test (reviewers-required-optional.test.tsx) that covers adding, switching required, the rule message, no duplicates and removing.