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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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