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-giga';

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

Live Editor
Result
Open in CodeSandbox

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

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

Live Editor
Result
Open in CodeSandbox