CodeField

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

Примеры​

Размер​

Размер задается с помощью свойства 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/plasma-b2c';

Поведение ячейки при вводе некорректного символа регулируется свойством itemErrorBehavior:

Live Editor
Result
Open in CodeSandbox

Поведение компонента при вводе некорректного кода и индикация ошибки​

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

Live Editor
Result
Open in CodeSandbox

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

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

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

@plasma.sberdevices.ru #123456

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

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