1Sponsor

Masked Input

Masked input for phone, date, credit card formats

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/masked-input.json

Usage

import { MaskedInput } from "@/components/ui/masked-input";
<MaskedInput
  mask="(###) ###-####"
  label="Phone Number"
  placeholder="(555) 123-4567"
/>

API Reference

MaskedInput

PropTypeDefault
maskstringrequired
valuestringundefined
onChange(value: string) => voidundefined
onSubmit(value: string) => voidundefined
labelstringundefined
placeholderstringundefined
autoFocusbooleanfalse
idstringundefined
widthnumber40