Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Confirm Cancel Subscription

ProNew

A cancellation dialog with a required reason survey where a chosen reason can show a matching retention offer without hiding the cancel button.

Customize

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.

children

Guide and examples

When to use it

Use this on the cancel step of a paid plan. The survey explains churn and the offer gives people a real alternative at the moment they are deciding.

Do not hide the cancel button, add extra confirmation steps, or make the reason optional-looking but required. Cancelling must be as easy as signing up.

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.

Log in Get Pro for $35

Props

ConfirmCancelSubscription

Prop	Type	Default	Description
`reasons`	`{ value, label, offer? }[]`	-	Choices. `offer` is `{ text, action }`. The value "other" asks for detail.
`onCancel`	`(reason, detail) => void \| Promise<void>`	-	Called when the person cancels.
`onAcceptOffer`	`(reason: string) => void`	-	Called when the person takes the offer.
`children`	`ReactNode`	-	The trigger.

Accessibility

The reasons are a labelled radiogroup; choosing Other shows a required, labelled text area.
An offer is a labelled region that appears when its reason is chosen; the cancel button stays visible and is never moved or hidden.
Dismissing the dialog keeps the plan and clears the form.

Keyboard

Key	Action
Arrow keys	move through the reasons
Enter	submits when a reason is chosen
Escape	keeps the plan

Testing

The pattern ships a Testing Library test (confirm-cancel-subscription.test.tsx) that covers the required reason, the offer, the Other detail field and dismissing to keep the plan.