Card Input

Number, expiry and CVC in one field: masks, Luhn check, auto-advance. Pro · Shop and payments › Payments and wallet

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add card-input

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { CardInput } from 'valyro-ui-pro';

Prop	Type	Default
`value`	`CardInputValue`		The three parts as raw digits (controlled).
`defaultValue`	`CardInputValue`		Initial `value` when uncontrolled.
`onValueChange`	`(value: CardInputValue, details: CardInputDetails) => void`		Called with the new `value` when it changes.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field height. Default `md`.
`invalid`	`boolean`	`false`	Marks the whole field invalid (e.g. a declined card); finished parts that fail their check are marked on their own.
`disabled`	`boolean`	`false`	Disables all three parts.
`name`	`string`		Prefix of the inputs' `name`s: `<name>-number`, `<name>-expiry`, `<name>-cvc`.
`labels`	`Partial<CardInputLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Credit Card — Bank card: gradient or two-tone, network detected from the number, contactless
Payment Methods — Saved cards and wallets as selectable cards
Transaction List — Transactions: charges, top-ups, refunds and balance
Wallet Balance — Wallet balance: hide amount, actions, card for top-ups
Purchase Card — Product purchase: banner, one-time payment or subscription, card and address
Loyalty Rewards — Loyalty program: points, tier, progress and a rewards catalog
Product Card — Product card
Product Grid — Product catalog
Product Filters — Catalog filters
Product Spotlight — Featured product: tagged photo, price, rating and actions
Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
Guided Product Finder — Product finder wizard: branching questions and why a product fits