CodeField

Компонент CodeField используется для ввода OTP-кодов.

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

Live Editor
Result
Open in CodeSandbox

Размер​

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

Live Editor
Result
Open in CodeSandbox

Форма компонента и длина кода​

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

Live Editor
Result
Open in CodeSandbox

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

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

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

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

Live Editor
Result
Open in CodeSandbox

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

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

Live Editor
Result
Open in CodeSandbox

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

Функционал Web OTP API актуален только в мобильных браузерах. По умолчанию WebOTP отключен. Чтобы разрешить компоненту запросить код через navigator.credentials.get(), передайте свойство enableWebOTP.

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

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

@plasma.sberdevices.ru #123456

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

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

Свойство autoComplete управляет только нативным автозаполнением и не влияет на явно включенный enableWebOTP.

API​