Forms

Credit Card Input

Card number, expiry and CVC with brand detection and Luhn validation.

Import

tsx

import { CreditCardInput } from "@cooud-ui/ui";

bash

npx cooud-ui add credit-card-input

Examples

Default

One unified field group — card number (auto-spaced with live brand detection), expiry (MM/YY auto-slash), and CVC. Focus auto-advances as each field completes, values are Luhn-validated, and a single `onChange` surfaces `{ number, expiry, cvc, brand, complete, valid }`.

Try 4242 4242 4242 4242 · 12/34 · 123

tsx

function CreditCardDemo() {
  const [card, setCard] = useState<CreditCardValue | null>(null);

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <CreditCardInput label="Card details" onChange={setCard} />
      <div className="flex min-h-6 items-center text-xs text-fg-tertiary">
        {card?.valid ? (
          <Badge variant="success">
            <Check aria-hidden="true" />
            Valid card
          </Badge>
        ) : (
          <span className="capitalize">
            {card && card.brand !== "unknown"
              ? `${card.brand} detected`
              : "Try 4242 4242 4242 4242 · 12/34 · 123"}
          </span>
        )}
      </div>
    </div>
  );
}

Brand detection

The payment network is inferred from the IIN/prefix as you type and rendered as a monochrome glyph — here a Visa test number seeds the field.

tsx

<CreditCardInput label="Card details" defaultNumber="4242 4242 4242 4242" />

With error

Pass `error` to force the invalid styling and render an announced (`role="alert"`) message under the group.

Your card was declined. Try another card.

tsx

<CreditCardInput
  label="Card details"
  defaultNumber="4000 0000 0000 0002"
  error="Your card was declined. Try another card."
/>

API Reference

Generated from the component's exported types.

CreditCardInputProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">

Prop	Type	Default	Description
`label`	`string`	`"Credit card"`	Accessible group label announced to assistive tech.
`defaultNumber`	`string`	—	Uncontrolled initial card number (digits or already-spaced).
`onChange`	`(value: CreditCardValue) => void`	—	Fires on every keystroke with the parsed, validated card value. Display-side only — do not persist, log, or transmit the raw PAN/CVC.
`invalid`	`boolean`	`false`	Forces the invalid styling and sets `aria-invalid` on every field.
`disabled`	`boolean`	`false`	Disables all three fields.
`error`	`string`	—	Optional error message rendered under the group with `role="alert"`.