Перейти к содержимому

CorePinInput

Примеры использования и документация.

Ввод одноразового кода или PIN: пользователь набирает подтверждение из SMS в отдельных ячейках с автопереходом, не переключаясь между полями. Используйте в двухфакторной аутентификации, подтверждении платежей и активационных кодах.

Технические детали: фиксированное число ячеек (length), модель — строка заполненных цифр по порядку; правка очищает ячейку на месте, внешняя установка модели (reset, инициализация) перерискладывает её с первой ячейки. Поддерживаются вставка кода целиком из буфера (раскладка с первой ячейки, фокус в последнюю заполненную), Backspace из пустой ячейки уходит в предыдущую и очищает её, стрелки перемещают фокус; вводятся только цифры. type=password маскирует символы — отдельный проп masked не нужен. flow — градиентная анимированная рамка ячеек (цвета темы — primary/secondary, реагируют на акцент); градиентные зеркала показывают цифру вместо нативного текста, но при type="password" зеркала не строятся, чтобы не утекать цифры поверх маски — flow-рамка при этом работает.

Без flow — рамка border

код: —

flow — градиентная рамка ячеек

код: —