Default
Card detailsWe never store the security code.
Show the codeHide the code
Default, code
<CardInput label="Card details" hint="We never store the security code." />CardInput
Card number, expiry and security code grouped in one bordered box, each part its own input with its own autocomplete token (cc-number, cc-exp, cc-csc).
- Pro
- Version 2.0.0-rc.1
- APG pattern: Group of text inputs (role group named by its label)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Filled
Card detailsWe never store the security code.
Show the codeHide the code
Filled, code
<CardInput
label="Card details"
hint="We never store the security code."
defaultValue={{ number: '4242 4242 4242 4242', expiry: '08/28', securityCode: '123' }}
/>Invalid
Card detailsWe never store the security code.Error: Enter the expiry date on your card
Show the codeHide the code
Invalid, code
<CardInput
label="Card details"
hint="We never store the security code."
isInvalid
errorMessage="Enter the expiry date on your card"
defaultValue={{ number: '4242 4242 4242 4242', expiry: '', securityCode: '123' }}
/>Disabled
Card detailsWe never store the security code.
Show the codeHide the code
Disabled, code
<CardInput label="Card details" hint="We never store the security code." isDisabled />Tokens
The 21 design tokens CardInput reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 21 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.border.subtle | … | --sd-color-border-subtle |
| color.icon.default | … | --sd-color-icon-default |
| color.text.disabled | … | --sd-color-text-disabled |
| color.text.secondary | … | --sd-color-text-secondary |
| field.error | … | --sd-field-error |
| field.error-icon | … | --sd-field-error-icon |
| field.label | … | --sd-field-label |
| input.bg | … | --sd-input-bg |
| input.bg-disabled | … | --sd-input-bg-disabled |
| input.border | … | --sd-input-border |
| input.border-hover | … | --sd-input-border-hover |
| input.border-invalid | … | --sd-input-border-invalid |
| input.fg | … | --sd-input-fg |
| input.height | … | --sd-input-height |
| input.padding-x | … | --sd-input-padding-x |
| input.placeholder | … | --sd-input-placeholder |
| input.radius | … | --sd-input-radius |
| motion.duration.fast | … | --sd-motion-duration-fast |
| motion.easing.standard | … | --sd-motion-easing-standard |
| spacing.gap.xs | … | --sd-spacing-gap-xs |
| spacing.stack.xs | … | --sd-spacing-stack-xs |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/card-inputThen import it
import { CardInput } from "@/components/ui/card-input"Props
| Prop | Type | What it does |
|---|---|---|
label | stringDefault 'Card details' | The group's visible label. Default "Card details". |
hint | string | Help under the box, linked to every part by aria-describedby (3.3.5). |
errorMessage | string | Shown with an icon and a hidden "Error:" when isInvalid; name the part ("Enter the expiry date on your card"). |
isInvalid | booleanDefault false | |
isDisabled | booleanDefault false | |
isRequired | boolean | |
value | CardValue | |
defaultValue | CardValue | |
onChange | (value: CardValue) => void | |
name | string | Form field name prefix: the parts submit as <name>-number, <name>-expiry and <name>-security-code. |
className | string |
When to use it
Use it for
- Card payment forms
- Updating the card on a subscription
Use something else for
- Saved cards: use RadioCard rows with media
- A provider's hosted card fields (Stripe Elements and similar): mount those instead and keep this layout
Accessibility
Screen readers announce "Card details, group", then "Card number, edit text", "Expiry date, MM/YY, edit text", "Security code, edit text", each with the hint.
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.3.5, 1.4.6, 1.4.9, 2.1.3, 2.4.13, 2.5.5, 3.3.9.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Name the part in the error ("Enter the expiry date on your card")
- Validate on submit, not while people type
Shared patterns it ships with: 3.3.8 and 3.3.9 (autocomplete tokens on every part, paste never blocked).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 100 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 280 text runs: 0 below 7:1, lowest 8.43:1 |
| Target size | 78 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 54 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab moves to the card number |
| Tab | Tab moves to the expiry date |
| Tab | Tab moves to the security code |
| Shift+Tab | Shift+Tab moves back to the expiry date |
In Figma
The Figma component is CardInput, with State (Default, Hover, Focus, Disabled, Invalid). The Figma library isn’t published yet.
Figma to code: State (Default, Hover, Focus, Disabled = isDisabled, Invalid = isInvalid); Label → label; nested Hint → hint; nested FieldError → errorMessage.