Пропсы корня
| Проп | Тип | По умолчанию |
|---|---|---|
value | string | — |
| Контролируемый код. | ||
defaultValue | string | '' |
Начальный код для неконтролируемого использования. По умолчанию ''. | ||
onChangeValue | (value: string) => void | — |
| Вызывается с кодом при его изменении. | ||
disabled | boolean | — |
| Отключает поле ввода, делая его неинтерактивным. Также применяет визуальный стиль отключённого состояния. | ||
placeholder | string | — |
| Символ-заполнитель, который показывается, когда поле пустое. | ||
size | PinFieldSize | 'md' |
| Визуальный размер поля PIN-кода. Влияет на габариты и размер шрифта. | ||
error | boolean | — |
| Показывает поле в состоянии ошибки. | ||
ref | Ref<HTMLDivElement> | — |
| Ref на корневой элемент. | ||
mask | Array<RegExp | string> | RegExp | — |
| Символы, которые принимает поле: RegExp для всего значения или массив с RegExp или фиксированным символом для каждой позиции. По умолчанию — цифры. | ||
maxLength | number | 4 |
Количество символов в коде. По умолчанию 4. | ||
Также принимает все атрибуты <div>.
Дочерние части
PinFieldInput: инпут, который хранит настоящее значение и обрабатывает фокус.PinFieldSlot: видимый слот для одного индекса.PinFieldSeparator: визуальный разделитель между группами.
PinFieldSlot
| Проп | Тип | По умолчанию |
|---|---|---|
indexобязательный | number | — |
| Индекс слота в последовательности PinField (с нуля). | ||
Также принимает все атрибуты <div>.
PinFieldSeparator
| Проп | Тип | По умолчанию |
|---|---|---|
size | PinFieldSize | — |
Управляет визуальным размером разделителя. Соответствует размеру окружающих элементов PinField. | ||
Также принимает все атрибуты <div>.
PinFieldInput
| Проп | Тип | По умолчанию |
|---|---|---|
ref | Ref<HTMLInputElement> | — |
Позволяет получить ref на экземпляр компонента. После размонтирования компонента React установит ref.current в null (или вызовет ref с null, если передан колбэк-ref). | ||
Также принимает все атрибуты <input>.
Типы
PinFieldPropsPinFieldInputPropsPinFieldSlotPropsPinFieldSeparatorPropsPinFieldSize
Модель состояния
- Корень отслеживает
value, индекс активного слота и состояние «выделено всё». PinFieldInput— настоящий редактируемый элемент управления.- Слоты получают из контекста содержимое, активное состояние, состояние плейсхолдера и стили отключённости и ошибки.
- Корень принимает
value,defaultValueиonChangeValue;PinFieldInputчитает значение из корня и по-прежнему вызывает собственныеonChangeиonInput. Сброс формы восстанавливаетdefaultValue, если поле не контролируемое. disabledиmaxLengthзадаются только наPinField, поэтому инпут и слоты всегда согласованы.placeholderкорня одновременно служит плейсхолдером инпута.