Masked Input

Pattern-masked inputs and localized currency formatting with stable caret positioning.

@drift-ui/masked-inputRegistry JSONGitHubOpen in v0

Raw value: 4242424242424242

Cents: 4999

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

masked-input-usage.tsx
import { CurrencyInput, MaskedInput } from "@/components/ui/masked-input"
import { Label } from "@/components/ui/label"

export function PaymentFields() {
  return (
    <div className="grid gap-3">
      <div className="grid gap-1.5">
        <Label htmlFor="card">Card number</Label>
        <MaskedInput id="card" mask="#### #### #### ####" placeholder="4242 4242 4242 4242" />
      </div>
      <div className="grid gap-1.5">
        <Label htmlFor="price">Amount</Label>
        <CurrencyInput id="price" currency="USD" locale="en-US" defaultValue={4999} />
      </div>
    </div>
  )
}

MaskedInput

Input that formats typed characters according to a mask pattern while storing the raw unmasked value.

Prop
maskRequiredstringMask pattern where # matches digits, a or A matches letters, and * matches alphanumeric characters.
definitionsRecord<string, RegExp>Custom character token definitions mapping token character to matching RegExp pattern.
valuestringControlled unmasked raw string.
defaultValuestringDefault""Initial value when uncontrolled.
onValueChange(value: string, formattedValue: string) => voidCalled with the unmasked and formatted values.
namestringSubmits the raw unmasked string via a hidden input.
disabledbooleanDisables the input.

Other props go to the <input>.

CurrencyInput

Input that formats monetary amounts according to currency and locale while storing integer cents.

Prop
currencystringDefault"USD"ISO 4217 currency code (e.g. USD, EUR, JPY, GBP).
localestringDefault"en-US"BCP 47 language tag for number and currency formatting.
valuenumber | nullControlled amount in integer cents.
defaultValuenumber | nullDefaultnullInitial value when uncontrolled.
onValueChange(value: number | null, formattedValue: string) => voidCalled with integer cents and formatted text.
minnumberMinimum allowed amount in cents. Enforced on blur.
maxnumberMaximum allowed amount in cents. Enforced during typing and on blur.
namestringSubmits the integer cents via a hidden input.
disabledbooleanDisables the input.

Other props go to the <input>.

Card formatting

Formats credit card and expiration inputs into standardized patterns.

Currency formatting

Localized currencies format symbols and decimal separators automatically while storing integer cents.

Phone numbers

Fixed patterns guide users into typing phone numbers in familiar formats.

Digits: none

components/ui/masked-input.tsx
CtrlK