MultiSelect для множественного выбора

MultiSelect — это компонент для выбора нескольких значений из предопределённого списка. Он представляет собой комбинированный элемент интерфейса, сочетающий текстовое поле и раскрывающийся список опций с чекбоксами. Используется для управления множественными значениями в формах, фильтрах и интерфейсах с большим объёмом данных.

Подключение и установка

Carbon Components Svelte распространяется через npm. Для использования MultiSelect необходимо установить пакет:

npm install carbon-components-svelte

Импорт MultiSelect выполняется следующим образом:

import MultiSelect from 'carbon-components-svelte/src/MultiSelect/MultiSelect.svelte';

Для корректного отображения компонентов требуется подключение стилей Carbon:

import 'carbon-components-svelte/css/g10.css'; // или g90/g100 по теме

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

  • items – массив объектов, которые будут отображаться в списке. Каждый объект должен содержать id и text:
const items = [
  { id: 'option-1', text: 'Option 1' },
  { id: 'option-2', text: 'Option 2' },
  { id: 'option-3', text: 'Option 3' }
];
  • selectedItems – массив выбранных элементов, синхронизируемый с состоянием компонента:
let selectedItems = [];
  • label – текстовая подпись для поля ввода. Рекомендуется использовать короткий и информативный текст:
<MultiSelect 
  {items} 
  bind:selectedItems 
  label="Выберите опции" 
/>
  • placeholder – текст, отображающийся при отсутствии выбранных элементов:
<MultiSelect placeholder="Начните ввод..." />
  • disabled – логическое значение, блокирующее взаимодействие с компонентом:
<MultiSelect {items} disabled />
  • titleText и helperText – дополнительный текст для пояснения назначения поля:
<MultiSelect 
  {items} 
  titleText="Выбор опций" 
  helperText="Вы можете выбрать несколько значений" 
/>

Работа с событиями

MultiSelect поддерживает несколько событий для управления состоянием и взаимодействия:

  • on:change – срабатывает при изменении выбора. Возвращает массив выбранных объектов:
<MultiSelect 
  {items} 
  bind:selectedItems 
  on:change={(event) => console.log(event.detail)} 
/>
  • on:input – срабатывает при вводе текста пользователем, полезно для фильтрации элементов:
<MultiSelect 
  {items} 
  on:input={(event) => filterItems(event.detail)} 
/>
  • on:focus и on:blur – события для управления фокусом поля, например, для валидации или стилизации.

Фильтрация и поиск

MultiSelect позволяет динамически фильтровать элементы на основе ввода пользователя. Обычно реализуется через реактивное обновление массива items:

$: filteredItems = items.filter(item => 
  item.text.toLowerCase().includes(searchValue.toLowerCase())
);

И передача filteredItems в компонент:

<MultiSelect 
  items={filteredItems} 
  bind:selectedItems 
  placeholder="Поиск..." 
/>

Кастомизация отображения

  • itemToString – функция, которая преобразует объект элемента в строку для отображения:
<MultiSelect 
  items={items} 
  itemToString={(item) => item ? item.text.toUpperCase() : ''} 
/>
  • titleText, helperText, invalid, invalidText – позволяют управлять стилем и отображением ошибок:
<MultiSelect 
  {items} 
  invalid={selectedItems.length === 0} 
  invalidText="Необходимо выбрать хотя бы один элемент" 
/>
  • typeAhead – включает автодополнение при вводе текста:
<MultiSelect {items} typeAhead />

Примеры интеграции в формы

MultiSelect часто используется вместе с формами Svelte. Пример синхронизации с объектом формы:

let formData = {
  options: []
};
<MultiSelect 
  items={items} 
  bind:selectedItems={formData.options} 
  label="Выберите опции" 
/>

Далее formData.options можно отправлять на сервер или использовать для фильтрации данных.

Оптимизация для больших списков

Для больших массивов элементов рекомендуется:

  • Использовать ленивую фильтрацию (typeAhead) вместо отображения всего списка сразу.
  • Ограничивать количество отображаемых элементов с помощью slice.
  • Кешировать результаты фильтрации для ускорения поиска.
$: visibleItems = filteredItems.slice(0, 50);

Доступность

Компонент поддерживает все необходимые ARIA-атрибуты для улучшенной доступности:

  • aria-label и aria-labelledby для описания поля.
  • aria-multiselectable автоматически выставляется.
  • Возможность навигации с клавиатуры: стрелки вверх/вниз, Enter для выбора, Esc для закрытия списка.

Эта структура MultiSelect в Carbon Components Svelte обеспечивает гибкость и мощь для создания сложных интерфейсов с множественным выбором, при этом сохраняя единый стиль Carbon и поддержку всех стандартов доступности.

Оглавление