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 |
|---|---|---|---|
value | { number, expiry, cvv, name? } | — | Controlled value object. |
onChange | (value) => void | — | Called whenever any field changes. |
showName | boolean | false | Render the cardholder-name field. |
disabled | boolean | false | Disables all sub-fields. |