Поле OTP выглядит как ряд ячеек, но под ними — один нативный <input>. Автозаполнение из SMS (autocomplete="one-time-code"), вставка, менеджеры паролей, формы и скринридеры видят обычное текстовое поле.
Вставленные коды очищаются, поэтому сработают и «123-456», и «123 456», а символы, которые не допускает шаблон, отбрасываются. На Android webOtp подставляет код из SMS, как только оно приходит.
Подтверждение
(completed) срабатывает, когда заполнена последняя ячейка. Чтобы отклонить код, задайте полю aria-invalid: ячейки покраснеют и вздрогнут.
Try 123456, or anything else.
Буквы, группы и маскирование
pattern="alphanumeric" принимает и буквы, [groups] добавляет разделители, а masked рисует точки.