shadcn.io is not affiliated with official shadcn/ui
Reason First Cancellation Contact Block for React
A cancellation form that asks why first: four reason cards, an offer panel that follows the reason (20% off, a smaller plan, a pause), and a confirm box, note and submit that are always there so an offer never blocks cancelling.
Installation
Overview
A cancellation section for React with Base UI, split behind a divider that meets the top rule with a plus. At the start are the header, the visitor's plan (a description list) and four reason cards, one per row, outside the form. At the end an offer panel follows the reason: twenty percent off for "It costs too much", a smaller plan for "We get too much food", a two-month pause for "We'll be away", and a plain "No offer for this one" for "Something else". A switch takes the offer instead of cancelling, a ghost "No thanks, continue" declines it and moves focus on, and neither is required: the confirm checkbox, an optional note ("What could we have done better?") and the Shine Button are always on the page, so an offer can never stand in the way of cancelling. Submitting checks the reason and the confirmation and focuses the first problem; the confirmation says whether the plan was cancelled or the offer saved. It's built from Radio Group, Switch, Checkbox, Textarea, Field, Guides, Shine Button and Button, with your theme's tokens for every colour. The plan, prices and offers are example data. For subscriptions, memberships and any service that wants to understand a cancellation without trapping the customer.
FAQ
Can an offer stop someone from cancelling?
No. The offer is a switch that starts off, and "No thanks, continue" is optional. The checkbox, the note and the submit button stay visible and active whatever reason is chosen, with a line saying nothing here stops cancelling. Only the reason is required, because the form asks why before it does anything else.
How do the offers follow the reason?
Each entry in REASONS carries its own offer (title, detail, icon) or none. The panel holds every view in one grid cell and shows the one for the chosen reason, so changing the reason never moves the page. The amounts are worked out from PLAN_CENTS, SMALL_CENTS and DISCOUNT; change those and the text follows.
Does the page change when the offer is taken?
The checkbox and the button change their words ("I'd like to keep my plan with this offer", "Keep my plan with this offer") and a polite line announces the choice. The button keeps a minimum width so it does not jump.
Why are the reasons outside the form?
They only steer the offer and are checked on submit through details; keeping the choice cards outside the form avoids the hidden radio input some libraries render inside a form.
Related
- Pro
Resolution Ladder Complaint Contact
Support and feedbackA complaint form in a card in card: four resolution cards one per row, each with its handling time, an incident date, an order number checked against its shape, and a switch that adds a Manager review badge.
- Pro
Invoice Picker Subscription Contact
Support and feedbackA billing question for a cloud storage service: the last three invoices as cells with overshoot lines, the chosen invoice's lines and total in a panel that stays in view, a reason select and a message.
- Pro
Star Rating Feedback Contact
Support and feedbackA product feedback form for a roadmap tool in a card in card: five named stars with a word that follows the choice, switch-on topic chips and a message, ending in a confirmation that lists what was chosen.
- Pro
Support Channels Contact
Support and feedbackA support desk for a help desk tool: a band of four channels with their response times above a form with a subject, a normal or urgent priority and a message, which checks itself and confirms in place.
- Pro
Order Lookup Contact
Support and feedbackAn order desk that looks the order up first: a number and email, a read-only timeline with dates counted from today, then a help form that wakes once an order is found.
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.