shadcn.io is not affiliated with official shadcn/ui
Guest Checkout Dialog Block for React Aria
A cart with its identify-step dialog shown open: Guest, Sign in and Create account swap the fields under a segmented control, one button names the mode, and the cart's stepper moves on to Shipping once you continue.
Installation
Overview
Ask who is checking out in one step, with this guest-checkout dialog for React with React Aria. It opens from the cart of Brasswick Goods, a home-hardware shop: the page's header holds an outline Check out Button, and the cart, three drawn items, a totals block and a stepper, sits under a soft scrim inside a hairline frame with a plus mark on each corner. The dialog starts with two lines that recap the order, then a Segment Group of three modes. Guest asks for an email and an updates box. Sign in asks for the email, a Password Input and has a reset link. Create account asks for the email, a new password with its rule and a box to save your details. The three panels share one space, so the dialog is as tall as the tallest and never jumps when the mode changes, and the one Shine Button names the mode: Continue as guest, Sign in, Create account and continue. Each mode checks only its own fields; signing in or creating waits a moment, and then the stepper on the cart behind the dialog moves to Shipping and says who you are. For preview the dialog is drawn open in place when the page loads; the header button opens the real Dialog, with the same mode and the same fields. For shops, ticketing and any checkout that lets people skip the account.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the cart: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Check out 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 IdentifyFields component and share the block's state, so an email typed in the copy, and the mode chosen, are 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.
How do the three modes share one space?
All three panels are on the page at once in one grid cell. The one you chose is shown; the other two are invisible and inert, so they take no focus, are skipped by screen readers and don't change the height. The email value is shared: type it in Guest, switch to Sign in, and it is still there. Each panel has its own field ids and names, so autofill and the browser's password manager know which is which, with the standard autocomplete values for a username, a new password and a current one.
What does each mode check?
When you press the button, or Enter in a field. Guest wants an email that looks like one. Sign in wants that and a password. Create account wants the email and a password of 8 or more characters with at least one number, and says so in the same slot under the field. Each problem has its own sentence, and focus goes to the first field with one. Once a message shows, it follows your typing and clears when the field is right.
Does it sign anyone in or create an account?
No. Guest continues at once; Sign in and Create account wait about two thirds of a second, with the button showing its busy state, and then the cart's stepper moves to Shipping and prints a line such as "Signed in as you@example.com, in this demo". Nothing is sent, nobody is signed in and nothing is saved; "Forgot password?" only says that reset isn't connected here. In your app call your sign-in and sign-up endpoints from submit after the checks, show their refusals in the field they belong to, and move the cart on only when they succeed.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus starts in the email field and stays inside until it closes, and Escape, Cancel and the close button all return focus to Check out. The button and the dialog sit inside DialogTrigger, controlled with isOpen and onOpenChange, and the title is a level 2 heading. The modes are a radio group you move through with the arrow keys, each field's hint or message is tied to it with aria-describedby, and one polite status message reports the result. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the header button.
How does it look on a phone?
The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with the mode's button on top, and the recap, the modes and the fields scroll above them. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.