Loading...
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "Card Information" | The label for the card input |
showPreview | boolean | true | Show card type preview |
onChange | (data: {number: string; expiry: string; cvc: string}) => void | undefined | Callback when card data changes |
Features
- Real-time Validation: Validates card numbers, expiry dates, and CVC codes as you type
- Card Type Detection: Automatically detects and displays card brand (Visa, Mastercard, etc.)
- Visual Card Icons: Shows appropriate card brand icons
- Input Formatting: Automatically formats card numbers with proper spacing
- Focus Management: Smooth focus transitions between fields
- Responsive Design: Adapts to different screen sizes