Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dialog examples · Standard

Card Details Dialog for React

A payment card dialog with cardholder name, card number, expiry and CVC fields, and a checkbox to make it the default method.

Framework
UI library

Adding a payment method shouldn't send people to another page. This React dialog collects a card's name, number, expiry and CVC, with a checkbox to make it the default. It's shadcn.io's Dialog on Base UI with Input, Checkbox and Field parts.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Can I send these card fields to my server?

Don't handle raw card numbers yourself. Use your payment provider's hosted fields or SDK, which return a token you store instead; this layout shows where those fields go.

How do I format the card number?

Group the digits in fours as people type, and detect the brand from the first digits. The inputs already set inputMode="numeric" and autoComplete="cc-number" so phones show a number pad and browsers can fill saved cards.

How do I validate the expiry date?

Check the MM/YY format, a month from 01 to 12 and a date that isn't in the past, and show the error in the field with a FieldError.

Should the CVC be masked?

No, it's short-lived and people need to check what they typed. Keep it visible, with autoComplete="cc-csc".

What does Set as default payment method do?

Nothing on its own: it's a Checkbox with a name, so its value submits with the form. Your handler makes the card the default and unsets the previous one.

Do the buttons close the dialog?

Cancel is a DialogClose, so it does. Add Card doesn't: submit the card, then close the dialog from your handler once it's saved. Pass open and update it in onOpenChange, which receives the new boolean.

All 17 dialog examples