Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Destructive with Checkbox Confirmation Alert Dialog for React

A delete-account dialog whose destructive action stays disabled until the reader checks a permanent-action checkbox.

A warning icon sits above Delete Account Permanently. The checkbox says the action is permanent and irreversible. Delete Account stays disabled until it is checked. The account is not deleted.

Use the checkbox for a serious irreversible confirm, not a routine item. Typing the resource name is stricter. See Input. In React, Base UI does not delete the account.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="destructive" />}>
    Delete Account
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader className="sm:place-items-center sm:text-center">
      <div className="mb-2 flex size-12 items-center justify-center rounded-full bg-destructive/10">
        <TriangleAlertIcon
          aria-hidden="true"
          className="size-6 text-destructive"
        />
      </div>
      <AlertDialogTitle>Delete Account Permanently</AlertDialogTitle>
      <AlertDialogDescription>
        This is a permanent action. All your data, projects, and settings
        will be deleted immediately and cannot be recovered.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <Field className="rounded-md border p-4" orientation="horizontal">
      <Checkbox
        checked={confirmed}
        id="delete-account-confirm"
        onCheckedChange={setConfirmed}
      />
      <FieldLabel className="font-normal" htmlFor="delete-account-confirm">
        I understand this action is permanent and irreversible
      </FieldLabel>
    </Field>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction disabled={!confirmed} variant="destructive">
{/* The rest of the file is under 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.

Is the checkbox accessible?

Yes. The label is associated with the checkbox, so it's announced and clickable, and keyboard users reach the checkbox before the disabled button.

What are the alternatives to a checkbox?

Typing the resource's name is stronger, as in Form with Validation State. For catastrophic actions use that; a checkbox is right for serious ones.

API Reference

Alert Dialog

Sets disabled={!confirmed} and variant="destructive". The rest is on the Alert Dialog page.

Button

Sets variant="destructive". The rest is on the Button page.

Field

Sets orientation="horizontal" and htmlFor="delete-account-confirm". The rest is on the Field page.

Checkbox

Sets checked={confirmed}, id="delete-account-confirm" and onCheckedChange={setConfirmed}. The rest is on the Checkbox page.

All 39 alert dialog examples