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

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

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

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

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

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

Виды полей

1. Вход

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

Пустое поле для пароля в фокусе, справа иконка глаза

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

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

Пустое поле для пароля в фокусе с иконкой глаза, под ним пустой серый индикатор сложности и подсказка «Минимум 8 символов»

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

По умолчанию все введённые символы заменяются на точки: • .

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

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

Поле с паролем, скрытым точками, и иконкой глаза, затем то же поле с видимым паролем «Гуд-жи3нь_2о16» и иконкой закрытого глаза; под обоими зелёный индикатор и «Надёжный пароль»

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

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

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

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

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

Индикатор при вводе пароля: при 1 символе полоска короткая красная, подсказка серая «Слишком короткий пароль, добавьте символов»; при 7 — жёлтая на две трети, подсказка та же, оранжевая; при 12 — зелёная почти во всю ширину, «Надёжный пароль»

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

Поле с видимым паролем «qwerty», под ним короткий красный индикатор и красная подсказка «Такой пароль легко взломать» с иконкой вопроса. Под иконкой тултип «Это популярный пароль. Его легко взломать.» с рекомендациями, как придумать надёжный пароль.

Дизайн

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

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

Поле со скрытым паролем и иконкой глаза, под ним зелёный индикатор почти во всю ширину и подпись «Надёжный пароль»

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

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

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

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

Валидация

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

Поле со скрытым паролем в красной рамке, справа тултип «Неверный пароль. Попробуйте ввести ещё раз или создайте новый.»

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

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

Доступность

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

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