CodeInput
Компонент CodeInput используется для ввода OTP-кодов.
Примеры
Размер
Размер задается с помощью свойства size.
Ширина компонента так же может регулироваться при помощи свойства width:
Допустимые символы и поведение ячейки при вводе некорректного символа
За допустимые символы для ввода отвечает свойство allowedSymbols. Задается строкой или регулярным выражением.
Библиотека экспортирует наиболее используемые вариации допустимых символов:
import { ONLY_DIGITS_PATTERN, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN } from '@salutejs/plasma-giga';
Поведение ячейки при вводе некорректного символа регулируется свойством itemErrorBehavior:
Поведение компонента при вводе некорректного кода и индикация ошибки
При заполнении всех полей ввода срабатывает колбэк onFullCodeEnter.
При неверном вводе кода, поведние компонента управляется с помощью свойства codeErrorBehavior.
Индикация ошибки происходит с помощью флага isError и колбека setIsError: