Slide to Delete Account

ProNew

An account deletion flow that needs an acknowledgement checkbox and then a full slide on a sliding button, so a stray tap can never delete anything.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this when the action ends an account, a workspace or a subscription. The two steps (acknowledge, then slide) are slow on purpose.

Do not use it when the action is routine or reversible, or the person is on a flaky pointer device and typing a name would be easier (Confirm Destructive Action).

Installation

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.

Props

Prop	Type	Required	Description
`consequences`	`string[]`	optional	What the person loses, shown as a list.
`onDelete`	`() => Promise<void>`	required	Deletes the account. A rejection resets the slider and shows the message.

Accessibility

The slider is a real slider with a keyboard route: arrow keys move it by 10% and End completes it.
The acknowledgement checkbox is labelled; the slider reports as disabled until it is ticked.
Errors use role=alert.

Testing

The pattern ships with a Testing Library test (slide-to-delete-account.test.tsx) that covers the locked slider, deleting after the acknowledgement and the failure path.