Поле ввода с маской Input

Маска в поле помогает пользователю не ошибиться в количестве символов и подсказывает, что значение будет отформатировано автоматически.

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

Когда необходимо ввести определенное количество символов. Например, дла ввода ОГРН:

Когда есть символы-разделители, например, номер паспорта или СНИЛС:

Маска показывается только после того, как поле получает фокус. Это снижает количество визуального шума на странице:

Если количество символов, которое нужно ввести, может быть разным, как в ИНН, маска не показывается, чтобы не путать пользователя.

Вводимое значение форматируется на лету. Если в маске есть разделители или пробелы, они появляются автоматически сразу после ввода предыдущего символа.

Если пользователь сам введет дефис или другой разделитель, они игнорируются, т. е. не добавляются дважды.

Если нажать Backspace, сотрется последний «настоящий» символ, который вводил сам пользователь:

При попытке ввода недопустимого или лишнего символа, этот символ игнорируется, поле вспыхивает синим. Тултип с текстом ошибки при этом не показывается, т. к. пользователь и сам поймет в чем проблема, а тултип будет только отвлекать:

Поле ввода с маской, как и обычное поле, может быть трех размеров. Подробнее смотри в гайде поля ввода.

Ширина поля должна соответствовать ширине вводимого значения. Можно делать поле чуть шире, чтобы выровнять его по ширине с соседними и сделать форму более упорядоченной.

Не разделяйте одно поле на несколько частей. Это затрудняет работу с полем: пользователь не знает, можно ли просто скопировать значение целиком и вставить его в первое поле:

При клике по полю и при переходе табом поле выглядит одинаково: появляется чёрная рамка и, если поле не заполнено — маска, которые сохраняются до потери фокуса.

Поле с ошибкой подсвечивается красной рамкой.

О поведении полей ввода с ошибками читайте в гайде по валидации.

Цвет маски #000 с прозрачностью 32%, цвет текста стандартный — #222.

Символ, который нужно ввести, обозначается в маске специальным знаком подчеркивания, ширина которого точно соответствует ширине цифр. Это нужно, чтобы по мере ввода маска не смещалась.