Input Mask

Input Mask - компонент для ввода данных с автоматическим форматированием. Идеально подходит для полей с фиксированным форматом: телефонные номера, даты, кредитные карты, почтовые индексы и многое другое.

Базовый пример использования для ввода номера телефона.

Символы маски

Input Mask использует специальные символы для определения формата:

Символ	Описание	Пример
9	Любая цифра (0-9)	`999-9999` → 123-4567
a	Любая буква (a-z, A-Z)	`aaa-999` → ABC-123
*	Любой символ	`*-*` → AB1-2C3

Все остальные символы в маске (дефисы, скобки, точки и т.д.) будут добавлены автоматически.

Основные возможности

Controlled

Вы можете контролировать значение поля используя свойства value и onValueChange.

Disabled

Отключенное состояние блокирует взаимодействие с компонентом.

Read Only

Режим только для чтения позволяет просматривать данные без возможности редактирования.

With Validation

Используйте валидацию совместно со свойствами isInvalid и errorMessage.

With Description

Добавьте описание для лучшего UX.

Стилизация

Variants

Input Mask поддерживает все варианты стилей из HeroUI Input.

Sizes

Input Mask поддерживает три размера: sm, md (по умолчанию) и lg.

Colors

Input Mask поддерживает различные цветовые темы.

Дополнительные форматы

Почтовые индексы

Форматы почтовых индексов для различных стран.

Валюты

Форматы для ввода денежных сумм в различных валютах.

IP адреса

Форматы для ввода IPv4 адресов и масок подсети.

Опции маски

Mask Options

Вы можете настроить поведение маски с помощью свойства maskOptions.

Доступные опции:

Опция	Тип	Описание	По умолчанию
clearIncomplete	`boolean`	Очищать неполный ввод при потере фокуса	`false`
showMaskOnFocus	`boolean`	Показывать маску при фокусе	`false`
showMaskOnHover	`boolean`	Показывать маску при наведении	`false`

Свойства

InputMask Props

Атрибут	Тип	Описание	По умолчанию
mask	`string`	Маска для ввода (обязательное)	-
maskOptions	`InputMaskOptions`	Дополнительные опции маски	`{}`

Наследуемые свойства Input

Input Mask наследует все свойства от HeroUI Input компонента:

label: Label для поля
placeholder: Placeholder текст
description: Описание под полем
errorMessage: Сообщение об ошибке
isInvalid: Флаг невалидного состояния
isDisabled: Флаг отключенного состояния
isReadOnly: Флаг только для чтения
isRequired: Флаг обязательного поля
isClearable: Показать кнопку очистки
labelPlacement: Позиция label (inside, outside, outside-left, outside-top)
size: Размер компонента (sm, md, lg)
color: Цвет темы
variant: Вариант стиля (flat, bordered, faded, underlined)
radius: Радиус скругления
startContent: Контент слева от поля
endContent: Контент справа от поля
value: Значение (для контролируемого компонента)
defaultValue: Начальное значение
onValueChange: Коллбэк при изменении значения
И другие свойства из Input API