PasswordInput для паролей

Компонент PasswordInput предназначен для ввода и управления паролями в пользовательских интерфейсах. Он обеспечивает стандартный UX для скрытия и отображения введённого текста, поддержку меток, сообщений об ошибках и дополнительных подсказок. В Carbon Components Svelte этот компонент реализован как Svelte-компонент с полным набором свойств для кастомизации.

Импорт и базовое использование

<script>
  import { PasswordInput } from 'carbon-components-svelte';
  let password = '';
</script>

<PasswordInput
  bind:value={password}
  label="Введите пароль"
  placeholder="Пароль"
/>

Объяснение ключевых моментов:

  • bind:value — двусторонняя привязка значения поля ввода к переменной Svelte.
  • label — текстовая метка для поля, обязательный элемент для доступности.
  • placeholder — текст-подсказка внутри поля, исчезает при вводе.

Управление видимостью пароля

Компонент позволяет пользователю переключать отображение введённого текста с символов на обычный текст. Это реализуется автоматически через встроенную кнопку с иконкой “показать/скрыть”.

<PasswordInput
  bind:value={password}
  label="Пароль"
  hideLabel={false}
/>
  • hideLabel={false} — метка остаётся видимой, что улучшает доступность.
  • Автоматически добавляется кнопка для смены видимости пароля, нет необходимости создавать её вручную.

Поддержка ошибок и сообщений

Компонент поддерживает вывод сообщений об ошибках и вспомогательных текстов. Для этого используются свойства invalid и invalidText.

<PasswordInput
  bind:value={password}
  label="Пароль"
  invalid={password.length < 8}
  invalidText="Пароль должен содержать не менее 8 символов"
/>

Особенности работы с ошибками:

  • invalid — булевое значение, указывающее на ошибку.
  • invalidText — текст сообщения, отображаемого под полем при invalid=true.
  • Сообщение автоматически получает стили Carbon для доступного отображения ошибок.

Настройка вспомогательного текста

Вспомогательный текст (helperText) используется для подсказок или инструкций по вводу пароля:

<PasswordInput
  bind:value={password}
  label="Пароль"
  helperText="Пароль должен содержать минимум 8 символов, включая цифры и буквы"
/>
  • helperText выводится под полем, отличается от invalidText тем, что отображается всегда, а не только при ошибке.
  • Можно комбинировать с invalidText — в этом случае при ошибке под полем отображается только сообщение об ошибке.

Размеры и стилизация

Компонент поддерживает разные размеры через CSS-классы Carbon. В Svelte это достигается через свойство size:

<PasswordInput
  bind:value={password}
  label="Пароль"
  size="sm"
/>

Возможные значения:

  • "sm" — маленький размер, используется для компактных форм.
  • "md" — средний (по умолчанию).
  • "lg" — большой, чаще используется в панелях админки или мобильных приложениях.

Дополнительно можно передавать собственные классы через class для расширенной кастомизации.

Доступность и взаимодействие с клавиатурой

Компонент полностью совместим с клавиатурным управлением и поддерживает стандарты доступности (ARIA):

  • Метка (label) связывается с полем через id.
  • Кнопка “показать/скрыть” доступна через клавишу Tab и реагирует на Enter или Space.
  • Сообщения об ошибках автоматически связываются с полем для скринридеров.
<PasswordInput
  bind:value={password}
  label="Пароль"
  helperText="Используйте комбинацию букв и цифр"
  invalid={password.length < 8}
  invalidText="Пароль слишком короткий"
/>

Интеграция с формами и валидация

PasswordInput можно использовать внутри Svelte-форм. Валидация может выполняться через:

  • Динамическое изменение свойства invalid.
  • Событие on:input для отслеживания изменений значения.
  • Внешние функции проверки пароля (например, регулярные выражения).
<script>
  import { PasswordInput } from 'carbon-components-svelte';
  let password = '';
  let isInvalid = false;

  function validatePassword() {
    isInvalid = password.length < 8;
  }
</script>

<PasswordInput
  bind:value={password}
  label="Пароль"
  invalid={isInvalid}
  invalidText="Пароль должен содержать минимум 8 символов"
  on:input={validatePassword}
/>
  • Такой подход позволяет отображать ошибки в реальном времени.
  • Можно интегрировать с Svelte-валидаторами или сторонними библиотеками.

Настройка событий

Компонент поддерживает стандартные события Svelte:

  • on:input — срабатывает при каждом изменении значения.
  • on:blur — при потере фокуса.
  • on:focus — при получении фокуса.
  • on:click — нажатие на поле или встроенную кнопку.

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

Пример комплексного использования

<script>
  import { PasswordInput } from 'carbon-components-svelte';
  let password = '';
  let isInvalid = false;

  function validatePassword() {
    isInvalid = password.length < 8 || !/\d/.test(password);
  }
</script>

<PasswordInput
  bind:value={password}
  label="Пароль"
  placeholder="Введите ваш пароль"
  helperText="Пароль должен содержать минимум 8 символов и цифру"
  invalid={isInvalid}
  invalidText="Пароль слишком простой"
  on:input={validatePassword}
/>

Ключевые моменты:

  • Комбинация bind:value, invalid, invalidText и helperText обеспечивает полный контроль UX.
  • Встроенная кнопка смены видимости пароля упрощает взаимодействие пользователя.
  • Поддержка событий позволяет интегрировать компонент в сложные формы и приложения.

Эта реализация PasswordInput в Carbon Components Svelte обеспечивает современный, доступный и полностью настраиваемый интерфейс для работы с паролями.

Оглавление