InputOtp
Поле коду підтвердження з одним accessible input, paste і мобільною клавіатурою.
Приклад
Введіть або вставте 6 цифр із повідомлення.
0/6
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
modelValue | string | "" | Введений код. Використовуйте через `v-model`. |
type | numericalphanumeric | "numeric" | Які символи приймати. `numeric` вмикає й числову клавіатуру на телефоні — літерна розкладка для коду з цифр коштує зайвого дотику. |
autocomplete | string | "one-time-code" | Значення autocomplete. `one-time-code` дозволяє браузеру підставити код зі свіжої SMS — заради цього компонент і побудований на ОДНОМУ полі вводу замість шести окремих. |
length | number | 6 | Кількість символів коду. |
label | string | — | — |
error | string | — | Текст помилки. Стан помилки вмикає САМА наявність тексту. |
hint | string | — | Підказка під полем. Ховається, коли показано помилку. |
id | string | — | — |
name | string | — | — |
disabled | boolean | false | — |
required | boolean | false | — |
mask | boolean | false | Ховати введені символи, як у полі пароля. |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [value: string] | Нормалізований код. |
complete | [value: string] | Код досяг заданої довжини. |
Доступно через ref
| Назва | Тип | Опис |
|---|---|---|
focus | () => void | — |
select | () => void | — |
Коли використовувати
Для SMS, email і authenticator-кодів. Вставлення заповнює код одним разом,
а autocomplete="one-time-code" дозволяє мобільній ОС запропонувати значення.
Коли НЕ використовувати
Не використовуйте для постійного пароля, PIN-коду платіжної картки або секрету, який треба зберігати. Компонент не реалізує надсилання чи перевірку коду — лише введення.
Доступність
Візуальні клітинки мають aria-hidden. Для скрінрідера й форми існує один
справжній input, тому вставлення, виділення та оголошення значення не
розсипаються на шість окремих полів.