TextArea для многострочного ввода

TextArea в библиотеке Carbon Components Svelte представляет собой компонент для ввода многострочного текста с поддержкой всех стандартных возможностей HTML <textarea>, но с расширенной функциональностью и визуальной интеграцией с дизайн-системой Carbon.

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

Чтобы использовать компонент, необходимо импортировать его из пакета:

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

<TextArea bind:value={value} labelText="Комментарий" />

Пояснение ключевых параметров:

  • value – двусторонняя привязка данных через bind:value, которая позволяет синхронизировать содержимое TextArea с переменной в компоненте.
  • labelText – текст метки, отображаемой над полем ввода. Обязательный для корректного отображения по стандартам Carbon.

Настройка размеров и вида

TextArea поддерживает несколько вариантов размеров и внешнего вида:

<TextArea
  bind:value={value}
  labelText="Описание"
  size="xl"
  helperText="Введите подробное описание"
  light={true}
/>
  • size – размер компонента (sm, md, lg, xl). Управляет высотой и пропорциями поля.
  • helperText – дополнительная подсказка под полем ввода, полезная для инструкций или пояснений.
  • light – переключает компонент в светлый режим для тёмных фонов.

Управление ошибками и валидацией

TextArea позволяет отображать ошибки и предупреждения с визуальной индикацией:

<TextArea
  bind:value={value}
  labelText="Email"
  invalid={value.length < 5}
  invalidText="Введите корректный email"
/>
  • invalid – логическое значение, включающее состояние ошибки.
  • invalidText – текст ошибки, который отображается при invalid=true.

Ограничение длины и подсчёт символов

Для контроля количества введённых символов:

<TextArea
  bind:value={value}
  labelText="Комментарий"
  maxLength={200}
  showCharacterCounter={true}
/>
  • maxLength – максимальное количество символов, которое можно ввести.
  • showCharacterCounter – отображает счетчик символов, информирующий пользователя о текущем количестве и лимите.

Автоматическое изменение высоты

Для динамической подстройки размера TextArea в зависимости от текста используется свойство expandable:

<TextArea
  bind:value={value}
  labelText="Подробный комментарий"
  expandable={true}
/>
  • expandable – компонент автоматически увеличивает высоту, когда текст занимает больше строк, улучшая удобство работы с длинными текстами.

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

Carbon Components Svelte позволяет применять дополнительные классы и стили через стандартные атрибуты class и style:

<TextArea
  bind:value={value}
  labelText="Отзыв"
  class="custom-textarea"
  style="border-color: #0f62fe"
/>
  • class – позволяет подключать собственные CSS-классы для кастомной стилизации.
  • style – прямое добавление CSS-стилей на компонент.

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

TextArea полностью поддерживает работу в составе форм Svelte, включая реактивные проверки и отправку данных:

<form on:submit|preventDefault={handleSubmit}>
  <TextArea
    bind:value={value}
    labelText="Описание задачи"
    required={true}
  />
  <button type="submit">Отправить</button>
</form>
  • required – делает поле обязательным для заполнения при отправке формы.
  • Использование on:submit|preventDefault позволяет перехватывать отправку формы и обрабатывать данные в Svelte.

Доступность (Accessibility)

TextArea в Carbon Components Svelte полностью соответствует стандартам ARIA:

  • Метка labelText автоматически связывается с полем через id и for.
  • Атрибуты aria-invalid и aria-describedby генерируются при наличии ошибок или вспомогательного текста.
  • Поддерживаются навигация с клавиатуры и управление фокусом.

Примеры комбинаций

  1. Светлый режим, с подсказкой и подсчётом символов:
<TextArea
  bind:value={value}
  labelText="Комментарий"
  helperText="Не более 300 символов"
  maxLength={300}
  showCharacterCounter={true}
  light={true}
/>
  1. С ошибкой и динамическим изменением высоты:
<TextArea
  bind:value={value}
  labelText="Подробности"
  invalid={value.trim() === ''}
  invalidText="Поле не может быть пустым"
  expandable={true}
/>

TextArea в Carbon Components Svelte объединяет мощный функционал стандартного HTML <textarea> с визуальной и поведенческой консистентностью дизайн-системы Carbon, предоставляя гибкость для разработки сложных пользовательских интерфейсов с многострочным вводом текста.

Оглавление