Card Input
Native formatted card inputs with auto-formatting, brand detection, and masking.
Installation
npx shadcn@latest add "https://billui.com/r/card-input.json""use client";
import * as React from "react";
import { cn } from "@/lib/utils";
import { CardBrandIcons, type CardBrand } from "./card-icons";
// ... component codeExamples
Basic Grouped Inputs
Use CardInputGroup to combine all card inputs into a single grouped component with shared focus states.
Individual Inputs
Use each input component separately for custom layouts with individual labels and styling.
API Reference
CardInputGroup
Container that groups card inputs together with shared focus states and border styling.
| Prop | Type | Default |
|---|---|---|
error | boolean | false |
CardNumberInput
Card number input with automatic formatting, brand detection, and Luhn validation.
| Prop | Type | Default |
|---|---|---|
value | string | — |
defaultValue | string | "" |
onValueChange | (value: string) => void | — |
onBrandChange | (brand: CardBrand) => void | — |
onValidationChange | (validation: { isValid: boolean; isComplete: boolean }) => void | — |
disabled | boolean | false |
CardExpiryInput
Expiry date input with MM/YY formatting and expiration validation.
| Prop | Type | Default |
|---|---|---|
value | string | — |
defaultValue | string | "" |
onValueChange | (value: string) => void | — |
onValidationChange | (validation: { isValid: boolean; isComplete: boolean; isExpired: boolean }) => void | — |
disabled | boolean | false |
CardCvcInput
CVC/CVV input that adapts to card brand (3 digits for most cards, 4 for Amex). When used inside CardInputGroup, automatically gets the brand from context.
| Prop | Type | Default |
|---|---|---|
value | string | — |
defaultValue | string | "" |
onValueChange | (value: string) => void | — |
disabled | boolean | false |
CardBrand
Type representing supported card brands.
type CardBrand =
| "visa"
| "mastercard"
| "amex"
| "discover"
| "diners"
| "jcb"
| "unionpay"
| "unknown";