shadcn.io is not affiliated with official shadcn/ui
Alert Dialog examples · Destructive
Destructive with Checkbox Confirmation Alert Dialog for React
A destructive dialog whose delete action stays disabled until the reader ticks a checkbox.
One click is too easy for a deletion that can't be undone. This React alert dialog keeps Delete Account disabled until the reader ticks I understand this action is permanent and irreversible, so nobody gets through on muscle memory. It's shadcn.io's Alert Dialog on Base UI with a Checkbox in a Field and a centered warning icon.
Preview
Installation
FAQ
When should a deletion require a checkbox?
For catastrophic, irreversible actions: deleting an account, purging all data, cancelling billing. For routine deletions the extra step only frustrates people.
How does the checkbox enable the button?
The checkbox is controlled, and the action takes disabled until it's checked. The disabled state shows why the button can't be pressed yet.
What should the checkbox say?
State the consequence being acknowledged, like I understand this action is permanent and irreversible. Vague wording such as I agree can be ticked without reading.
How is the confirmation area built?
A horizontal Field with rounded-md border p-4 holds the Checkbox and its FieldLabel, so the whole label is clickable and the box reads as a separate step.
Related
- Simple Delete Confirmation Alert DialogA simple delete confirmation with a
- Delete Confirmation with Icon Alert DialogA delete confirmation with a trash icon
- Destructive with Consequence Details Alert DialogA destructive dialog that lists what
- Single Input Dialog Alert DialogAn alert dialog with one prefilled input
- Simple CheckboxA checkbox with a label for a single
- Confirmation with Centered Icon Alert DialogA confirmation dialog with a large icon