MaskedInput

Text input that formats entry against a mask of digit, letter, and literal tokens.

MaskedInput formats what the user types against a mask pattern. The tokens are 9 (digit), a (letter), and * (alphanumeric); any other character is a literal that gets inserted automatically. It is fully controlled — value holds the already-masked string — and is handy for dates, phone numbers, or codes.

Example

Preview

Phone

Date

import { MaskedInput } from '@officina/ui';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState('');
  return <MaskedInput mask="(999) 999-9999" label="Phone" value={value} onChange={setValue} />;
}

API

Prop	Type	Default	Description
mask*	string	—	Mask pattern; `9` = digit, `a` = letter, `*` = alphanumeric (e.g. "(999) 999-9999").
onChange*	(value: string) => void	—	Called with the masked value on input.
value*	string	—	Current (masked) value.
disabled	boolean	—
invalid	boolean	—	Mark the field invalid for validation styling.
label	string	—	Visible label above the field.
name	string	—
placeholder	string	—
required	boolean	—

Example

API

On this page