Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn environment switcher where moving to Production needs typing its name in a confirmation, other environments switch at once, and the active environment is labelled in text and colour on the control. Use this when switching context can change real data.
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.
Use it in admin tools, dashboards and consoles, where Development and Staging are safe but acting in Production is not, so entering it should be a decision.
Do not use it when the environments are read-only views. Switch freely.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
environments | { id, label, description?, requiresConfirm?, tone? }[] | 3 environments | requiresConfirm makes the switch need typing label (case-insensitive). |
value | string | - | The active environment id (controlled). |
defaultValue | string | development | Initial environment. |
onValueChange | (id: string) => void | - | Runs after any needed confirmation. |
aria-label | string | Environment | Names the control. |
combobox named Environment; its text is the active environment, in a badge-like chip that is also coloured.requires confirmation in their option text.AlertDialog: the Confirm button stays disabled until the typed text matches, the field has a label and an error-free hint, and Cancel keeps the previous environment.Environment: Production.The pattern ships with a Testing Library test (environment-select-confirm-prod.test.tsx) that covers switching safe environments at once, confirmation for Production, a mismatching name and cancelling.