Danger Zone Form
Destructive delete form with an itemized consequence list, two acknowledgment checkboxes, and a type-to-confirm input that gates the delete button.
Destructive delete form with an itemized consequence list, two acknowledgment checkboxes, and a type-to-confirm input that gates the delete button.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Danger Zone Form is the destructive confirmation pattern: a warning that deletion is permanent, an itemized list of exactly what deletion destroys (deployments stop resolving, the slug is released, logs purge after 30 days), two acknowledgment checkboxes, and a type-to-confirm input that keeps the delete button disabled until the project name is typed exactly and both boxes are checked.
The consequence lines live in a const array and the gate is a single derived boolean: both acknowledgments true and the typed value matching the project name. The type-to-confirm step is the load-bearing detail, it turns an accidental click into a deliberate action.
Reach for this block in the danger zone of a settings page, wired to your delete endpoint and the resource name you want typed back. Use it for any action with no undo: deleting a project, closing an account, or removing a workspace.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the delete project panel. Other destructive-confirmation surfaces:
Tip: name the exact consequences rather than a generic warning; the specific lines are what make someone stop and read before they type.