Select и выпадающие списки

Select в Carbon Components Svelte представляет собой компонент для организации выбора одного значения из набора предопределённых опций. Он обеспечивает доступность, адаптивность и интеграцию с другими компонентами библиотеки.

<script>
  import { Select, SelectItem } from 'carbon-components-svelte';
  
  let selectedValue = '';
</script>

<Select bind:value={selectedValue} label="Выберите вариант">
  <SelectItem value="" text="Выберите..." />
  <SelectItem value="option1" text="Вариант 1" />
  <SelectItem value="option2" text="Вариант 2" />
</Select>

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

  • bind:value позволяет двусторонне связывать выбранное значение с переменной.
  • label задаёт текстовую подпись для Select.
  • Каждая опция представлена компонентом SelectItem с атрибутами value и text.

Структура и свойства

Основные свойства компонента Select:

Свойство Тип Описание
label string Подпись для поля Select
disabled boolean Блокирует выбор опции, делает Select неактивным
helperText string Подсказка под полем ввода
value string Текущее выбранное значение
invalid boolean Указывает на ошибку в выборе
invalidText string Текст ошибки
size ‘sm’ ‘md’

Пример использования с подсказкой и обработкой ошибок:

<Select
  bind:value={selectedValue}
  label="Выберите город"
  helperText="Начните вводить город"
  invalid={selectedValue === ''}
  invalidText="Обязательный выбор"
>
  <SelectItem value="" text="Выберите..." />
  <SelectItem value="moscow" text="Москва" />
  <SelectItem value="spb" text="Санкт-Петербург" />
</Select>

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

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

  • on:change — вызывается при изменении выбранного значения.
  • on:focus и on:blur — реагируют на фокус и потерю фокуса.

Пример с событием change:

<Select bind:value={selectedValue} label="Выберите язык" on:change={(e) => console.log(e.detail)}>
  <SelectItem value="" text="Выберите..." />
  <SelectItem value="js" text="JavaScript" />
  <SelectItem value="ts" text="TypeScript" />
</Select>

Событие change возвращает объект с ключом detail, содержащим новое значение.

Группировка и разделители

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

<Select label="Выберите страну">
  <SelectItem value="" text="Выберите..." />
  <SelectItem text="Европа" disabled />
  <SelectItem value="fr" text="Франция" />
  <SelectItem value="de" text="Германия" />
  <SelectItem text="Азия" disabled />
  <SelectItem value="jp" text="Япония" />
  <SelectItem value="cn" text="Китай" />
</Select>

Особенности:

  • Группирующие элементы помечаются disabled и служат визуальными разделителями.
  • Можно комбинировать с подсказками и проверкой валидности.

Стилизация и размеры

Компонент поддерживает два основных размера:

<Select label="Малый Select" size="sm">
  <SelectItem value="1" text="Один" />
  <SelectItem value="2" text="Два" />
</Select>

<Select label="Средний Select" size="md">
  <SelectItem value="1" text="Один" />
  <SelectItem value="2" text="Два" />
</Select>

Важные моменты:

  • Малый размер (sm) подходит для компактных форм.
  • Средний размер (md) является стандартным для большинства интерфейсов.
  • Цвет и оформление наследуются от темы Carbon, можно кастомизировать через SCSS-переменные.

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

Select полностью совместим с формами Svelte:

<form on:submit|preventDefault={() => console.log(selectedValue)}>
  <Select bind:value={selectedValue} label="Выберите категорию">
    <SelectItem value="" text="Выберите..." />
    <SelectItem value="a" text="Категория A" />
    <SelectItem value="b" text="Категория B" />
  </Select>
  <button type="submit">Отправить</button>
</form>

Особенности:

  • Двустороннее связывание позволяет получить текущее значение сразу.
  • Можно легко интегрировать с валидацией и форм-менеджерами.

Доступность

Select в Carbon Components Svelte поддерживает все рекомендации по доступности:

  • Поддержка клавиатуры: стрелки вверх/вниз, Enter для выбора.
  • ARIA-атрибуты генерируются автоматически.
  • Сопровождение текстом helperText и invalidText для экранных читалок.

Резюме практических подходов

  • Использовать bind:value для привязки выбранного значения.
  • Добавлять helperText и invalidText для улучшенной UX и доступности.
  • Группировать элементы при большом количестве опций для наглядности.
  • Применять размеры sm или md в зависимости от дизайна формы.
  • Обрабатывать события change, focus и blur для динамических интерфейсов.

Эти подходы обеспечивают максимально удобное, доступное и структурированное использование Select и выпадающих списков в Svelte-приложениях на базе Carbon Components.

Оглавление