Forms

Credit Card Input

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

Import

tsx

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

bash

npx cronus-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" onValueChange={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."
/>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component CreditCardInputDefault layout:inline style:credit-card-input {
  value:"4242424242424242"
  label "Credit card"
}

page "/audit/credit-card-input/default" type:custom {
  use CreditCardInputDefault
}

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).
`onValueChange`	`(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.
`onChange`	`(value: CreditCardValue) => void`	—	Called when the value changes.
`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"`.
`labels`	`Partial<CreditCardInputLabels>`	—	Override default English strings.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

CreditCardInputLabels

Prop	Type	Default	Description
`number`*	`string`	—	—
`expiry`*	`string`	—	—
`cvc`*	`(digits: number) => string`	—	—
`brand`*	`(name: string) => string`	—	—