Credit Card Input
A composite input that auto-formats card numbers, validates the expiry date, and detects the card brand (Visa, Mastercard, Amex, Discover, Diners, JCB, UnionPay). The CVV length adjusts automatically per brand.
Fields
- Card number — Spaces inserted at brand-specific positions. Brand icon shown on the right once detected.
- Expiry (MM/YY) — Auto-inserts the slash; rejects invalid months and past dates.
- CVV — Length adjusts to brand (4 digits for Amex, otherwise 3).
- Name — Optional, opt in via
showName.
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onCardChange | (data: { number, expiry, cvv, cardType, isValid }) => void | — | Called whenever any field changes; emits the full card state and detected brand. |
disabled | boolean | false | Disables all sub-fields. |