Helper text и подсказки

Helper text — это элемент интерфейса, предназначенный для предоставления пользователю дополнительной информации о поле ввода или элементе управления. В библиотеке Carbon Components Svelte helper text используется для повышения юзабилити форм, снижения ошибок ввода и улучшения восприятия интерфейса.

Основные свойства helper text

В Carbon Components Svelte helper text реализуется через компонент HelperText. Ключевые свойства:

  • text — основной текст подсказки. Строковое значение, которое отображается под полем ввода.
  • disabled — булевое значение. Если установлено в true, текст отображается в неактивном стиле, подчеркивая, что подсказка временно недоступна.
  • invalid — булевое значение. Используется для индикации ошибки или недопустимого значения поля ввода. В этом случае текст подсветится красным и может сопровождаться иконкой ошибки.
  • id — уникальный идентификатор для связывания helper text с элементом формы через атрибут aria-describedby.

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

<script>
  import { TextInput, HelperText } from 'carbon-components-svelte';
  let inputValue = '';
  let isInvalid = false;
</script>

<TextInput
  bind:value={inputValue}
  labelText="Имя пользователя"
  invalid={isInvalid}
  helperTextId="username-helper"
/>

<HelperText id="username-helper" invalid={isInvalid}>
  Имя пользователя должно содержать от 3 до 15 символов.
</HelperText>

Типы helper text

  1. Default helper text — основной информационный текст, помогающий пользователю понять формат или требования к вводу. Используется без состояния invalid или disabled.

  2. Disabled helper text — текст, который визуально приглушен и сигнализирует о недоступности элемента или информации.

  3. Error helper text — появляется при неправильном вводе и используется совместно с атрибутом invalid у соответствующего поля.

  4. Tooltip helper text — особый вид подсказки, который может быть показан при наведении на иконку или элемент. В Svelte это реализуется через компонент TooltipDefinition в связке с helper text для пояснения функций элементов управления.

Динамическая интеграция

Helper text может изменяться динамически в зависимости от состояния формы:

<script>
  import { TextInput, HelperText } from 'carbon-components-svelte';
  let email = '';
  let isEmailValid = true;

  $: helperMessage = isEmailValid
    ? 'Введите корректный email'
    : 'Email введён неверно';
</script>

<TextInput
  bind:value={email}
  labelText="Email"
  invalid={!isEmailValid}
  helperTextId="email-helper"
/>

<HelperText id="email-helper" invalid={!isEmailValid}>
  {helperMessage}
</HelperText>

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

Взаимодействие с формами и доступность

  • Helper text должен быть связан с полем через aria-describedby, что обеспечивает доступность для экранных читалок.
  • В случае ошибок или предупреждений атрибут invalid автоматически добавляет соответствующие классы и свойства для поддержки ARIA-стандартов.
  • В сложных формах рекомендуется использовать один helper text на поле, но допускается использование нескольких при необходимости, если каждый выполняет отдельную функцию (например, формат ввода и ограничения по длине).

Комбинирование с другими компонентами Carbon

Helper text интегрируется с большинством компонентов ввода:

  • TextInput — стандартное текстовое поле.
  • NumberInput — для числовых значений, где helper text может содержать диапазон допустимых чисел.
  • Select — для выпадающих списков, где текст подсказывает правила выбора.
  • Checkbox и RadioButton — для объяснения группы опций или ограничения выбора.

Пример для NumberInput:

<script>
  import { NumberInput, HelperText } from 'carbon-components-svelte';
  let age = 18;
</script>

<NumberInput
  bind:value={age}
  label="Возраст"
  helperTextId="age-helper"
/>

<HelperText id="age-helper">
  Возраст должен быть от 18 до 99 лет.
</HelperText>

Стилизация и кастомизация

Carbon Components Svelte использует SCSS-переменные для стилизации helper text. Можно изменять:

  • Цвет текста: $helper-text-color
  • Цвет текста ошибки: $helper-text-error-color
  • Размер шрифта: $helper-text-font-size
  • Отступы и выравнивание через стандартные классы Carbon.

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

<HelperText class="my-custom-helper" invalid={true}>
  Поле обязательно для заполнения.
</HelperText>

<style>
  .my-custom-helper {
    font-weight: 500;
    font-size: 0.875rem;
  }
</style>

Практические рекомендации

  • Всегда использовать id для связи helper text с полем ввода.
  • Различать типы сообщений: информационные, предупреждения и ошибки.
  • При динамическом изменении текста учитывать плавное обновление интерфейса, чтобы не отвлекать пользователя резкой сменой контента.
  • Использовать helper text совместно с tooltip для сложных или редко используемых подсказок, чтобы не перегружать интерфейс.

Helper text — ключевой элемент, повышающий информативность форм, снижая вероятность ошибок и улучшая пользовательский опыт. Его грамотное использование позволяет создавать интерфейсы, соответствующие стандартам Carbon и современным требованиям доступности.

Оглавление