For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/en/components/input-mask.md.
Leaf UIReact components
GitHub

InputMask

Enter information in a specified format.

Basic usage

Unmasked value: —
basic.tsx
import { InputMask, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function InputMaskBasic() {
  const [value, setValue] = useState('');
  return (
    <Space direction="vertical" align="stretch">
      <InputMask
        mask="+{86} 000 0000 0000"
        placeholder="+86 138 0000 0000"
        unmask
        value={value}
        onChange={setValue}
        aria-label="Phone number"
      />
      <output>
        <Text tone="muted">Unmasked value: {value || '—'}</Text>
      </output>
    </Space>
  );
}

More examples

Card number format
Custom letter and digit rules
advanced.tsx
import { InputMask, Space, Text } from '@ifhover/leaf-ui';

export function InputMaskFormats() {
  return (
    <Space direction="vertical" align="stretch">
      <Text tone="muted">Card number format</Text>
      <InputMask mask="0000 0000 0000 0000" lazy={false} aria-label="Card number" />
      <Text tone="muted">Custom letter and digit rules</Text>
      <InputMask
        mask="AA-0000"
        definitions={{ A: /[A-Z]/ }}
        placeholder="AB-1234"
        aria-label="Identifier"
      />
    </Space>
  );
}

Usage

Mask characters are 0 for digits, a for letters and * for alphanumeric. Validate business rules in your application. unmask affects component values and callbacks; native form submission uses the display value.

Types

Import these types for data, callbacks and refs.

import type { InputMaskProps } from '@ifhover/leaf-ui';

InputMaskProps API

PropertyTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Size or spacing preset
status'error' | 'warning'—Display state
prefixReactNode—Content before the input
suffixReactNode—Content after the input
allowClearbooleanfalseShow the clear button
onClear() => void—Called after clearing the input
showCountboolean | ((value: string, maxLength?: number) => ReactNode)falseDisplay count or a custom renderer
onPressEnterKeyboardEventHandler<HTMLInputElement>—Called when Enter is pressed
maskstringRequiredPattern: 0 for digits, a for letters, * for alphanumeric
definitionsRecord<string, RegExp>—Custom character rules
lazybooleantrueShow placeholders as needed
unmaskbooleanfalseUse unmasked values and callbacks
valuestring—Controlled value
defaultValuestring''Initial value, restored by uncontrolled form resets
onChange(value: string, formatted: string) => void—Value change callback
onComplete(value: string) => void—Called when input is complete