Masked Input

A powerful input component that applies intelligent formatting masks to user input, providing real-time formatting for phone numbers, credit cards, dates, currency, and other structured data using IMask.

Phone Number

Automatically formats as (XXX) XXX-XXXX

Credit Card

Formats as XXXX XXXX XXXX XXXX

Date

Formats as MM/DD/YYYY

Installation

CLI

bash

npx fivui add masked-input

Manual

The component uses react-imask for advanced masking functionality. Install it with:

bash

npm install react-imask

Usage

Basic Usage

tsx

import { MaskedInput } from "@/components/ui/masked-input"

export function BasicMaskedInput() {
  const [phone, setPhone] = React.useState("")

  return (
    <div className="space-y-2">
      <label className="text-sm font-medium">Phone Number</label>
      <MaskedInput
        mask="(000) 000-0000"
        placeholder="(555) 123-4567"
        value={phone}
        onAccept={(value) => setPhone(value)}
      />
    </div>
  )
}

Advanced Configuration

tsx

export function AdvancedMaskedInput() {
  const [creditCard, setCreditCard] = React.useState("")

  return (
    <MaskedInput
      mask="0000 0000 0000 0000"
      placeholder="1234 5678 9012 3456"
      value={creditCard}
      onAccept={(value) => setCreditCard(value)}
      definitions={{
        '0': /[0-9]/,
        'A': /[A-Z]/,
        'a': /[a-z]/,
        '*': /[A-Za-z0-9]/
      }}
      validate: (value) => {
        // Luhn algorithm validation
        return value.replace(/\s/g, '').length === 16
      }
      className="font-mono"
    />
  )
}

Examples

Phone Number Masking

Format phone numbers with automatic parentheses and dashes.

Phone Number

Enter numbers to see automatic formatting

tsx

<MaskedInput
  mask="(000) 000-0000"
  placeholder="(555) 123-4567"
  value={phone}
  onAccept={(value) => setPhone(value)}
  className="font-mono"
/>

Credit Card Masking

Format credit card numbers with automatic spacing.

Credit Card

Automatic spacing for readability

tsx

<MaskedInput
  mask="0000 0000 0000 0000"
  placeholder="1234 5678 9012 3456"
  value={creditCard}
  onAccept={(value) => setCreditCard(value)}
  className="font-mono"
/>

Date Masking

Format dates with automatic slashes and validation.

Date

Automatic date formatting

tsx

<MaskedInput
  mask="00/00/0000"
  placeholder="MM/DD/YYYY"
  value={date}
  onAccept={(value) => setDate(value)}
  className="font-mono"
/>

Custom Format Patterns

Create custom masking patterns for specific use cases.

Social Security Number

Format: XXX-XX-XXXX

tsx

// SSN Mask
<MaskedInput mask="000-00-0000" placeholder="123-45-6789" />

// ZIP Code Mask
<MaskedInput mask="00000-0000" placeholder="12345-6789" />

// Time Mask
<MaskedInput mask="00:00 aa" placeholder="12:34 PM" />

Features

Flexible Masking

Support for string patterns, RegExp, arrays, and custom functions for complex masking scenarios.

Built-in Validation

Advanced validation with custom rules, real-time feedback, and type-specific validation for numbers, dates, and more.

Real-time Formatting

Instant formatting as users type with intelligent cursor positioning and seamless user experience.

Highly Configurable

Extensive configuration options including custom definitions, blocks, preprocessors, and postprocessors.

Number Support

Specialized number masking with scale, radix, thousands separators, and fractional zero padding.

TypeScript

Full TypeScript support with comprehensive type definitions for all props and callbacks.

External Links

React IMask

The underlying masking library that powers this component.

IMask.js

The core masking library with comprehensive documentation and examples.