CodeInput

Компонент CodeInput используется для ввода OTP-кодов в виде крупных символов с круговыми индикаторами.

Быстрый старт​

Live Editor
Result
Open in CodeSandbox

Размер​

Размер задается с помощью свойства size. Ширина компонента также может регулироваться при помощи свойства width:

Live Editor
Result
Open in CodeSandbox

Длина кода​

Длина кода задается с помощью свойства codeLength:

Live Editor
Result
Open in CodeSandbox

Скрытый ввод​

Свойство hidden переводит компонент в режим скрытого ввода: вместо символов отображаются круговые индикаторы. Это удобно для ввода PIN-кодов и других секретных данных:

Live Editor
Result
Open in CodeSandbox

Допустимые символы​

За допустимые символы для ввода отвечает свойство allowedSymbols. Задается строкой или регулярным выражением. Библиотека экспортирует наиболее используемые вариации допустимых символов: import { ONLY_DIGITS_PATTERN, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN } from '@salutejs/plasma-web';

Поведение при вводе​

Поведение ячейки при вводе некорректного символа регулируется свойством itemErrorBehavior. При заполнении всех полей ввода срабатывает колбэк onFullCodeEnter. При неверном вводе кода поведение компонента управляется свойством codeErrorBehavior. Индикация ошибки — с помощью флага isError и колбэка setIsError:

Live Editor
Result
Open in CodeSandbox

Тип клавиатуры на мобильных устройствах​

Свойство inputMode управляет типом виртуальной клавиатуры, отображаемой на мобильных устройствах. По умолчанию используется numeric — открывается числовая клавиатура. Значение text открывает стандартную текстовую клавиатуру:

Live Editor
Result
Open in CodeSandbox

Работа с OTP-кодом из СМС​

Функционал Web OTP API актуален только в мобильных браузерах. Для корректного автозаполнения кода СМС должна быть отправлена в следующем формате:

Ваш код подтверждения: 123456.

@plasma.sberdevices.ru #123456

Первая и вторая (пустая) строки являются необязательными и предназначены для удобства чтения пользователем. Последняя строка обязательна и должна состоять из:

  • доменной части URL-адреса веб-сайта, который вызвал API; обязательно начинается с символа @
  • затем следует OTP, перед которым стоит знак #

Таблица свойств​