Поле с паролем PasswordInput

Однострочное поле для ввода пароля, в котором символы заменяются на точки.

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

Такое поле используют для ввода пароля:

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

Не используйте такое поле для ввода одноразовых кодов из смс. У них короткий срок действия и используются они только один раз.

Виды полей

Вход

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

Установка пароля

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

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

Скрытие пароля

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

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

Установка или изменение пароля

Самый простой способ увеличить надежность пароля — добавить символов. Индикатор в виде цветной полоски побуждает пользователя придумывать длинные пароли.

Алгоритм определяет, насколько сложно взломать пароль. Сначала он проверяет, есть ли пароль в списке популярных паролей. Затем он вычисляет, сколько времени потребуется, чтобы подобрать пароль прямым перебором. Как только это значение превышает 100 лет, мы считаем пароль надежным.

Минимальное условие для надежного пароля — 6 символов.

Длина индикатора плавно увеличивается при вводе пароля. Как только пользователь перестал вводить символы, с задержкой в полсекунды появляется подсказка.

Если введенный пароль входит в список популярных паролей, сообщаем об этом пользователю. Индикатор меняет цвет на красный. У подсказки появляется тултип, в котором даны рекомендации по созданию пароля. Тултип всплывает справа от иконки.

Отличия в браузерах

В некоторых браузерах могут появляться дополнительные иконки. Например, в Safari появляется иконка подстановки пароля. Следите, чтобы иконки не накладывались друг на друга в таких случаях.

В Internet Explorer заменяйте стандартную иконку с глазиком на нашу, чтобы она одинаково отображалась во всех браузерах.

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

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

Рекомендуемая ширина поля с паролем — 280-340 px.

Ширина индикатора сложности под полем всегда должна совпадать с шириной поля.

Фокус и работа с клавиатурой

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

Валидация

Валидация срабатывает после отправки формы, если пользователь ввел неправильный пароль.

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

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

Дизайн

Внешне выглядит как поле ввода, с небольшими отличиями:

  • Все символы в поле заменены точками: • ;
  • Справа в поле стоит иконка из набора интерфейсных иконок. Она выполняет действие «показать пароль». Цвет иконки: #757575;
  • В формах установки или смены пароля под полем есть индикатор сложности пароля. Он плавно растет и изменяет свой цвет в зависимости от сложности пароля.