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

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

Когда использовать

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

Поле «ОГРН» в фокусе с маской: на месте каждой цифры знак подчёркивания

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

Три поля с масками: «№ паспорта» — группы из 2, 2 и 4 знаков через пробел, «СНИЛС» — три группы по 3 знака через дефис и 2 знака через пробел, «Дата» — 2, 2 и 4 знака через точку, с иконкой календаря

Описание работы

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

Сначала пустое поле без маски, затем оно же в фокусе — появилась маска, после нажатия клавиши «8» в поле цифра 8 и остаток маски

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

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

Поле в фокусе с введёнными цифрами «12» и маской с дефисами; после нажатия клавиши «3» в поле «123-» — дефис добавился сам, курсор после него

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

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

Поле со значением «123-» и курсором после дефиса; после нажатия Backspace в поле «12» — стёрлась цифра 3 вместе с дефисом

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

Дизайн

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

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

Размер и расположение

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

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

Три поля друг под другом: среднее, в фокусе с маской, намного шире маски и выступает за край соседних полей

Неправильно

Три поля друг под другом: среднее, в фокусе с маской, той же ширины, что и верхнее; нижнее поле с иконкой календаря уже

Правильно

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

«Номер карты» — четыре отдельных поля по 4 знака, первое в фокусе с маской

Неправильно

«Номер карты» — одно поле в фокусе с маской из четырёх групп по 4 знака

Правильно

Валидация

Подробнее о поведении полей ввода с ошибками — в гайде «Валидация».

Доступность

Управление клавиатурой

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

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

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