Card field
A card number, expiry and CVC field group with as-you-type grouping, Luhn and expiry validation, network detection as a text tag, auto-advance between parts and clear error states.
Preview
Payment method
$148.00 / monthCard
Your card is charged only when you confirm.
Try 3782 822463 10005 for a 15-digit card with a 4-digit CVC.
Saved card
Visa
Visa ending in 4242 is ready.
Needs attention
Mastercard
Card number is invalid. Check the digits.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onValueChange | (value: CardValue) => void | — | { number, expMonth, expYear, cvc, network, complete } on every edit. |
| now | Date | client clock | Reference for the expired check; pass it for stable SSR. |
| defaultValue | { number?, expiry?, cvc? } | — | Prefill, e.g. a saved card; expiry as "MM/YY". |
| disabled | boolean | false | Dims and disables all three parts. |
| aria-label | string | "Card details" | Name of the field group. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.