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

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

Используйте маски для полей когда необходимо ввести определенное количество символов. Например, для ввода ОГРН:

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

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

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

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

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

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

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

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

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

Неправильно

Правильно

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

Неправильно

Правильно

При клике по полю или переходом по табу, появляется фокусная рамка.

Если поле пустое, появляется маска.

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

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

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

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