94 Pro components and page blocks

Get Pro
uibrik

Card Input

Pro

Preview

Customize

Medium
Radius12px

Installation

Pro

Card Input is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/card-input

Usage

import { CardInput } from "@/components/uibrik/card-input/card-input";​const defaultValue = { number: "4242424242424242", expiry: "0830", cvc: "123", postal: "94107" };​<CardInput  size="md"  collapse  postalCode={false}  showBrand  showErrors  radius={12}  accept={["visa", "mastercard"]}  defaultValue={defaultValue}  onChange={(value) => {}}  onComplete={(value) => {}}  // saved={{ brand: …, last4: … }}  // onEditChange={(editing) => {}}  // postalLabel="…"  // name="…"  // error="…"  // label="…"  // disabled={false}  // autoFocus={false}/>

Props

CardInput
size
Type "sm" | "md" | "lg"
"md"
Field height and type size.
collapse
Type boolean
true
Fold the number to its last four digits once it's complete, making room for expiry and CVC.
postalCode
Type boolean
false
Ask for a postal code after the CVC.
showBrand
Type boolean
true
Show the detected card brand at the start of the field.
showErrors
Type boolean
true
Show the first problem under the field.
radius
Type number
12
Corner radius of the field.
onChange
Type (value: CardValue) => void
–
Called on every edit with { number, brand, expiry: { month, year }, cvc, postal, complete, error }. Raw card numbers put your site in PCI DSS scope; see the note in the source.
onComplete
Type (value: CardValue) => void
–
Called once every part is filled and valid.
accept
Type CardBrand[]
–
Brands you take, e.g. ["visa", "mastercard"]. Others are refused as soon as they're detected.
saved / onEditChange
Type { brand; last4; expiry? } / (editing) => void
–
Show a card on file, masked, with a Change button that opens the empty form. Escape or Cancel goes back.
postalLabel
Type string
"ZIP"
Placeholder for the postal code.
name
Type string
–
Base for each input's name ("card" gives card.number, card.expiry, card.cvc, card.postal), for plain forms.
defaultValue
Type { number?; expiry?; cvc?; postal? }
–
Starting values, read once on mount.
error
Type string
–
An error from your payment provider, shown under the field.
label
Type string
"Card details"
Accessible name for the group.
disabled
Type boolean
false
Grey the field out.
autoFocus
Type boolean
false
Focus the number on mount.
className
Type string
–
Classes for the wrapper.