PinInput

import {PinInput} from '@gravity-ui/uikit';

PinInput — это группа элементов для быстрого ввода последовательности числовых или алфавитно-цифровых значений. Чаще всего используется для ввода одноразовых паролей (OTP) или кодов подтверждения, получаемых через SMS, электронную почту или приложения-аутентификаторы.

Каждый элемент ввода принимает один символ за раз. После успешного ввода значения фокус перемещается на следующий элемент ввода, пока все поля не будут заполнены.

§Тип

По умолчанию элементы ввода принимают только числовые значения. Чтобы разрешить ввод алфавитно-цифровых значений, установите свойство type в значение "alphanumeric":

<PinInput type="alphanumeric" />

§Размер

Данный компонент бывает 4 размеров: s, m, l и xl. Размер по умолчанию — m.

<PinInput size="s" />
<PinInput size="m" />
<PinInput size="l" />
<PinInput size="xl" />

§Состояние

Если вы не хотите, чтобы пользователь взаимодействовал с компонентом, задайте свойство disabled:

<PinInput disabled />

Чтобы отобразить недопустимое состояние компонента, задайте значение "invalid" в свойстве validationState. Опционально можно задать текст сообщения об ошибке через свойство errorMessage.

<PinInput validationState="invalid" errorMessage="Incorrect PIN" />

§Заглушка

По умолчанию заглушка в элементах ввода отсутствует. Можно добавить ее с помощью свойства placeholder:

<PinInput placeholder="😎" />

§Маска

Если нужно маскировать введенные значения, используйте свойство mask, которое работает аналогично <input type="password"/>:

<PinInput mask />

§OTP

Если вы хотите, чтобы браузер предлагал одноразовые коды из внешнего контекста (например, SMS), задайте свойство otp.

§API

• focus(): void — переключает фокус на текущий активный элемент ввода.

§API CSS

§Свойства