Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn alert dialog that lists what will happen with one checkbox per consequence and unlocks only when every box is ticked; use this when several facts must each be accepted.
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 this when closing an account, removing a billing method or leaving a team has several separate effects and each must be read. One tick per effect stops a single reflex click from accepting everything.
Do not use it for a single fact (use confirm-with-acknowledgement) or for more than four or five lines, which become a wall of boxes.
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 |
|---|---|---|---|
consequences | string[] | - | One checkbox per entry. All must be ticked. |
onConfirm | () => void | - | Runs when the unlocked action is pressed. |
children | ReactNode | - | The trigger. |
title, description | ReactNode | - | Dialog text. |
actionLabel | string | Continue | Label of the action. |
fieldset with a hidden legend, so a screen reader announces the group.| Key | Action |
|---|---|
| Space | ticks the focused checkbox |
| Tab | moves through the boxes, Cancel and the action |
The pattern ships a Testing Library test (confirm-with-consequences.test.tsx) that covers the running count, unlocking only when all are ticked, unticking, the fieldset and the reset on reopening.