Select Plan Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Choose a plan button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same PlanFields component and share the block's state, so a plan chosen in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Each plan is a native radio inside a label, so the browser gives you the group, the arrow keys and the checked state with no script. The chosen row's feature list is in a grid row that grows from zero height to its full height (the animation is off under reduced motion), and the closed lists stay in the markup, folded and inert, so they can't take focus. Every list has four short items, so the rows add up to the same height whichever plan is open; the comparison table is the one thing that makes the body longer, and it scrolls inside the dialog.

Each plan has a monthly price in cents; yearly is that times 10, shown as a year, and the free plan is zero either way. The due-today figure and the renewal date come from the chosen plan and the switch (a month or a year after the date the block treats as now), formatted with Intl.NumberFormat in US dollars and Intl.DateTimeFormat in UTC, so they read the same on the server and in every time zone. Replace the typed PLANS with the plans your billing provider returns, and take the due-today figure from its invoice preview, which knows about tax and credit.

Everything. Continuing only changes the banner behind the dialog and the sentence in the page header, and says in the polite status that nothing was bought. No plan is purchased and no card is charged. In your app send the plan and the cycle to your server and show its result in the same place; this dialog collects no payment details, so pair it with a payment method step.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the chosen plan and stays inside until it closes, and Escape, Cancel and the close button return focus to Choose a plan. The arrow keys move between plans, the switch and the disclosure are real controls with names, and the table has a caption, column headers and row headers, with a word for each tick or dash. What is said while the dialog is open (a plan chosen, the cycle changed) is said inside it, because a modal hides the page's own status. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

The copy shown on load docks to the foot of the page as a bottom sheet, its two buttons stacked at the bottom with the primary on top, and the plans scroll above them. The feature lists become a single column and the comparison table keeps its four columns at 320 pixels. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.