shadcn.io is not affiliated with official shadcn/ui
Dialog examples · Standard
Checkout Dialog for React
A checkout dialog with a billing cycle choice, card details and a total that follows the chosen cycle.
A checkout that spans several pages loses people. This React dialog puts the billing cycle and the payment details in one place, and the Complete Purchase button shows the price for the cycle picked. It's shadcn.io's Dialog on Base UI with a Radio Group of choice cards and Field inputs.
Preview
Installation
FAQ
How does the price follow the billing cycle?
The radio group is controlled, and the button reads the total for the selected cycle from a static list. Monthly shows $29, Yearly $290.
Why radio cards instead of buttons?
A billing cycle is one choice out of several, which is what a radio group is: arrow keys move between the options and screen readers announce the selection. Each card is a FieldLabel around a Field with the title, the price and the RadioGroupItem.
How is the yearly saving shown?
With a Badge using variant="success" inside the Yearly card, so it follows the theme's success color.
When should I validate the card fields?
When each field loses focus, with the error in a FieldError, and keep Complete Purchase disabled until everything is valid. Better still, use your payment provider's hosted fields.
Related
- Card Details DialogA payment card dialog with cardholder
- Standard DialogA share dialog with a read-only link, a
- Input with LabelA text input with a label above it
- Simple CheckboxA checkbox with a label for a single
- Button with Text (Standard)The one filled action
- Signup Form DialogA sign-up dialog with name, email and