Forms
CreditCardInput
A card number/name/expiry/CVC entry with a live, flipping card preview and network detection.
<UiCreditCardInput />Model value
modelValue is the four fields as one object, two-way bound. v-model:valid reports whether the details currently pass their checks.
•••• •••• •••• ••••
Not valid yet
modelValue is a single object ({ number, name, expiry, cvc }), always fully controlled like Input — there's no uncontrolled/defaultValue mode, so you always merge your own copy on @update:modelValue.
The live preview is just a CreditCard rendered internally with modelValue's four fields plus :flipped="cvcFocused" — the brand detection, grouping, and placeholder-padding logic all actually live on CreditCard; this component only reuses its exports (detectCardBrand, NUMBER_GROUPS, etc., imported from ./CreditCard.vue) to drive the input fields' own formatting/validation.
The card network (and with it, the number's digit grouping, its max length, and the CVC's max length) is re-detected from modelValue.number on every keystroke — American Express switches to 4-6-5 grouping with a 4-digit CVC as soon as a 34/37 prefix is typed, no separate brand prop needed.
update:valid fires (including once immediately on mount) whenever the combined validity — Luhn checksum + full-length number, a non-empty name, a not-yet-expired MM/YY, and a correctly-sized CVC — changes; use v-model:valid rather than re-deriving it yourself.
The network is detected as you type
Typing a number starting with 4 groups it as Visa (4-4-4-4), while 34/37 switches to American Express (4-6-5, 4-digit CVC) — try 4242 4242 4242 4242 vs 3782 822463 10005.
Disabled
disabled disables all the fields.
4242 4242 4242 4242
Variant
variant picks between the ringed outline field on the page background and the filled, tinted soft one with no ring.
•••• •••• •••• ••••
•••• •••• •••• ••••
Show card
showCard is the live card preview above the fields — it flips when the CVC field takes focus. Turn it off where the checkout already shows the card elsewhere.
•••• •••• •••• ••••
Focusing the CVC field flips the live preview to its back face; blurring flips it back — there's no prop to control the flip directly, it's entirely driven by real DOM focus/blur on the CVC input.
show-card="false" removes the live preview entirely, leaving just the three input rows — useful if you're building your own visualization or don't have the room for one.
Wrapped in FormField
•••• •••• •••• ••••
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
CreditCardValue{ number: '', name: '', expiry: '', cvc: '' }Emits
update:modelValue[value: CreditCardValue]update:valid[value: boolean]Types
interface CreditCardValue {
/**
* The card number, automatically grouped with spaces as it's typed (e.g. '4242 4242 4242 4242').
*/
number: string;
/**
* The cardholder's name, exactly as typed.
*/
name: string;
/**
* The expiry date, automatically formatted as 'MM/YY'.
*/
expiry: string;
/**
* The card security code.
*/
cvc: string;
}