build69
build69  /  Components  /  Masked & Validated  /  CreditCardInput

CreditCardInput

v1.0.4Updated 18 Oct 2026

Credit card number field that auto-detects the brand from the typed prefix and shows a tinted badge (Visa, Mastercard, Amex, Discover, JCB). The mask switches itself to Amex's 15-digit `0000 000000 00000` grouping the moment a 34/37 prefix is seen, and back to 16-digit grouping otherwise. Sets inputMode="numeric" and autoComplete="cc-number"; the badge can be hidden with `hideBrand`.

View source← Back to catalog

Preview

Live · 6 stories
Credit Card With BrandOpen ↗
▸Why this is recommendedformmaskinputcredit-card+6

CreditCardInput with brand.

Recommended for+14
  • ✓Collecting card details in checkout
  • ✓Adding a payment card on file in billing settings
  • ✓Subscription payment method entry
  • ✓Any card number field that should show the detected brand
Tags+6
formmaskinputcredit-cardpaymentcheckoutbrand-detectioncreditcardbrand
Features+4
  • Brand auto-detect from the card prefix (Visa / MC / Amex / Discover / JCB)
  • Inside a FormField the error shows as a ring on the input box, never an overlay icon over the brand badge
  • Mask adapts to Amex's 15-digit grouping automatically
  • Tinted brand badge with a card icon; suppress via hideBrand
  • inputMode="numeric" + autoComplete="cc-number" for autofill
  • Works controlled or uncontrolled (keeps internal state when value is omitted)
  • Exported `detectCardBrand(value)` helper for use outside the field
Not recommended for−2
  • ✕PCI-scoped card capture (use your gateway's hosted iframe such as Stripe Elements)
  • ✕CVC or expiry entry (use InputMask or DateInput)
  • ✕Free-form text (use Input)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "CreditCardInput" })

Usage

import { CreditCardInput, detectCardBrand } from '@/components/inputs/input-mask/credit-card-input';

<CreditCardInput value={card} onAccept={setCard} />
// detectCardBrand('4242...') === 'visa'

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Current masked card number; omit to run uncontrolled

string—
onAccept

Fires whenever the masked value changes

(value: string) => void—
hideBrand

Hide the brand badge

boolean—
placeholder

Defaults to '0000 0000 0000 0000'

string—
aria-invalid

Renders the destructive border and ring

boolean—
disabled

Disables the field; the value stays masked

boolean—

Related

Platform docsAll componentsSource files