Input Phone

Input Phone - компонент для ввода международных номеров телефонов с автоматическим форматированием и выбором страны. Идеально подходит для форм регистрации, контактных данных и любых полей, требующих ввода телефонного номера.

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

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

Controlled

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

With Default Country

Установите начальную страну с помощью свойства defaultCountry.

With Country Callbacks

Используйте коллбэки onCountryChange и onCountryChangeFull для отслеживания изменения страны.

Disabled

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

Read Only

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

With Validation

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

With Description

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

Стилизация

Variants

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

Sizes

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

Colors

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

Label Placements

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

React Hook Form

Input Phone легко интегрируется с react-hook-form через Controller.

Свойства

InputPhone Props

Атрибут	Тип	Описание	По умолчанию
value	`string`	Контролируемое значение номера телефона	-
defaultValue	`string`	Начальное значение для неконтролируемого режима	-
onValueChange	`(value: string) => void`	Коллбэк изменения значения	-
country	`CountryCode`	Текущая страна (контролируемый режим)	-
defaultCountry	`CountryCode`	Начальная страна (неконтролируемый режим)	`'US'`
onCountryChange	`(countryCode: CountryCode) => void`	Коллбэк изменения страны (только код)	-
onCountryChangeFull	`(country: Country) => void`	Коллбэк изменения страны (полный объект)	-
selectCountryProps	`SelectRootProps`	Пропсы для компонента выбора страны	-

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

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

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

Slots

Input Phone использует slots от базового Input компонента:

base: Обертка компонента
label: Label элемент
mainWrapper: Обертка когда label находится outside/outside-left
inputWrapper: Обертка для input
innerWrapper: Внутренняя обертка для содержимого
input: Поле ввода
clearButton: Кнопка очистки
helperWrapper: Обертка для description и errorMessage
description: Описание
errorMessage: Сообщение об ошибке

Data Attributes

Input Phone имеет следующие data-атрибуты на элементе base:

data-invalid: Когда поле невалидно (основано на isInvalid)
data-required: Когда поле обязательно (основано на isRequired)
data-readonly: Когда поле только для чтения (основано на isReadOnly)
data-disabled: Когда поле отключено (основано на isDisabled)
data-hover: При наведении курсора
data-focus: При фокусе
data-focus-within: При фокусе на элементе или его дочерних элементах
data-focus-visible: При фокусе с клавиатуры

Input Phone построен на основе HeroUI Input и InputMask с полной поддержкой доступности
Селектор страны реализован через доступный Select компонент
Поддерживает навигацию с клавиатуры для выбора страны и ввода номера
Автоматическое форматирование не мешает вводу и чтению
Label корректно связаны с полем ввода
Поддерживает ARIA атрибуты для скрин-ридеров
Флаги стран служат визуальной подсказкой, но не являются единственным индикатором

Примечания

Компонент использует react-phone-number-input для управления масками
Маски автоматически подбираются для каждой страны
При смене страны маска обновляется автоматически
Значение всегда содержит только цифры (без форматирования)
Для валидации номеров рекомендуется использовать libphonenumber-js
Селектор страны поддерживает поиск по коду страны
Компонент поддерживает более 200 стран
При использовании в формах рекомендуется хранить код страны отдельно

Зависимости

Компонент требует следующие пакеты:

Или с помощью pnpm: