Forms · Text entry · Stable

Input Password

Поле для ввода паролей: скрывает символы точками и позволяет временно показать текст для проверки. Используется в формах входа, регистрации и изменения пароля. В продвинутых версиях показывает, насколько надёжный пароль создан, и какие требования ещё нужно выполнить. Наследует все размеры, состояния и интенты базового компонента Input.

Размеры

SM · MD · LG · XL

Error

md · data-error

Strength Bar

weak · medium · strong
Слабый пароль
Можно лучше
Надёжный пароль

Field Group

conditions · recommendations
  • Не менее 8 символов
  • Заглавная буква
  • Цифра или специальный символ

Не используйте личные данные (имя, дата рождения и т.п.). Исключите словарные слова и простые последовательности (qwerty, 123456). Не повторяйте 3 последних пароля.

LabelIn

floating label · eye toggle

Доступность

ARIA · Keyboard · APCA · Focus
ARIA

Разметка

  • Поле имеет role="textbox" и aria-label или связанный <label>
  • При ошибке: aria-invalid="true" + aria-describedby → id текста ошибки
  • Иконка видимости имеет aria-label: «Показать пароль» / «Скрыть пароль»
  • autocomplete="current-password" для существующего пароля, autocomplete="new-password" для создания нового — помогает менеджерам паролей
  • Progress bar — role="progressbar" с aria-valuemin/max/now
Клавиатура

Навигация

  • Tab — переход фокуса на поле
  • Shift + Tab — возврат назад; фокус визуально различим через границу/обводку
  • Tab — перемещение фокуса на иконку «глаз» (показ/скрытие символов)
  • Enter / Space — переключение видимости, когда фокус на иконке
WCAG 2.2 AA · APCA

Контраст и размер

  • ДС использует APCA Lc (не WCAG ratios): Lc ≥ 60 для текста / Lc ≥ 45 для UI-лейблов
  • Touch target на мобильных: минимум 44×44 px (Apple), 48×48 px (Material Design)
  • Состояние ошибки сопровождается текстом пояснения — не только цветом обводки
  • Прогресс-бар надёжности окрашивается семантически (Error / Warning / Success)
  • Размер SM на мобильных не применяется — недостаточная область касания
Focus Ring

Фокус

  • Outline 2px, цвет --ds-info-800 (#5475F8)
  • Offset 1px — виден на любом фоне
  • Виден при навигации с клавиатуры (:focus-visible)
  • Отдельный фокус на поле и на иконке «глаз»

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

Tab · Shift + Tab · Enter / Space
Клавиша
Действие
Tab
Переход фокуса на компонент.
Shift Tab
Возврат фокуса назад. Фокус визуально различим через изменение границы или обводки.
Tab
Перемещение фокуса на иконку «глаз» (показ / скрытие символов).
Enter Space
Активировать переключение видимости, когда фокус находится на иконке.

Атрибуты autocomplete (current-password / new-password) помогают браузерам и менеджерам паролей правильно идентифицировать поле. На мобильных отключайте автокоррекцию и автоматические заглавные буквы — пароли чувствительны к регистру.

Правила использования

Когда · Чего избегать
Правила

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

  • Вход в систему — базовая версия без валидации; ставится после поля логина или email
  • Регистрация — версия с валидацией: требования, мгновенная обратная связь, прогресс-бар надёжности
  • Изменение пароля — текущий (базовый), новый (с валидацией), подтверждение (базовый)
  • Подтверждение критичных действий — платёжные данные, удаление аккаунта, доступ к конфиденциальному
  • Административные панели — временные пароли, сброс доступа, политики безопасности
  • Всегда оставляйте возможность показать пароль перед отправкой
Чего избегать

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

  • Не убирайте возможность показать пароль — без неё больше ошибок при вводе
  • Не используйте размер SM для версий с лейблом внутри (Label in / Label in conditions)
  • Не добавляйте валидацию в формы входа — требования уже известны системе
  • Не делайте больше пяти условий проверки — это перегружает интерфейс
Форма входа → без валидации
Проверка пароля при входе происходит на сервере — встроенная валидация требований только мешает.

State Explorer

Интерактивный тест состояний