Visibility Select With Explanations

ProNew

A visibility selector (Private, Team, Link, Public) that says in a sentence who can see the item, and asks for confirmation before anything becomes visible to the world. Use this when a choice changes who can see your content.

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.

value

defaultValue

aria-label

Guide and examples

When to use it

Use it for documents, projects, profiles and links, where picking "Public" by mistake is costly and every level needs a plain-language explanation.

Do not use it when visibility has two obvious states. Use a switch with a description.

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
`levels`	`{ id, label, description, confirm? }[]`	4 levels	`confirm` is the sentence to confirm when moving to this level from a narrower one.
`value`	`string`	-	The level id (controlled).
`defaultValue`	`string`	`private`	Initial level.
`onValueChange`	`(id: string) => void`	-	Runs when a level is confirmed.
`aria-label`	`string`	`Visibility`	Names the control.

Accessibility

Options read Public, anyone on the internet can find and read this; the chosen level's sentence stays under the button.
Moving to a wider level that has a confirm sentence replaces the list with a confirmation panel (role="alertdialog"-like region with an accessible label); Cancel is focused first.
Narrowing never asks: tightening access is always safe.
Cancel returns to the previous level and announces Kept Private.; confirming announces Now Public.

Testing

The pattern ships with a Testing Library test (visibility-select-with-explanations.test.tsx) that covers the sentences, confirming a widening choice, cancelling and narrowing without a prompt.

Guide and examples

When to use it

Use it for documents, projects, profiles and links, where picking "Public" by mistake is costly and every level needs a plain-language explanation.

Do not use it when visibility has two obvious states. Use a switch with a description.

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
`levels`	`{ id, label, description, confirm? }[]`	4 levels	`confirm` is the sentence to confirm when moving to this level from a narrower one.
`value`	`string`	-	The level id (controlled).
`defaultValue`	`string`	`private`	Initial level.
`onValueChange`	`(id: string) => void`	-	Runs when a level is confirmed.
`aria-label`	`string`	`Visibility`	Names the control.

Accessibility

Options read Public, anyone on the internet can find and read this; the chosen level's sentence stays under the button.
Moving to a wider level that has a confirm sentence replaces the list with a confirmation panel (role="alertdialog"-like region with an accessible label); Cancel is focused first.
Narrowing never asks: tightening access is always safe.
Cancel returns to the previous level and announces Kept Private.; confirming announces Now Public.

Testing

The pattern ships with a Testing Library test (visibility-select-with-explanations.test.tsx) that covers the sentences, confirming a widening choice, cancelling and narrowing without a prompt.