Checkbox и множественный выбор

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

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

Для использования checkbox необходимо импортировать компонент из пакета carbon-components-svelte:

<script>
  import { Checkbox } from 'carbon-components-svelte';
  let checked = false;
</script>

<Checkbox bind:checked={checked} label="Выберите этот вариант" />

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

  • bind:checked обеспечивает реактивную привязку состояния чекбокса к переменной.
  • label задает текстовую подпись для чекбокса, которая автоматически связывается с элементом через id и for, обеспечивая доступность.

Группы чекбоксов и множественный выбор

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

<script>
  import { Checkbox } from 'carbon-components-svelte';
  let options = [
    { id: 'option1', label: 'Первый вариант', checked: false },
    { id: 'option2', label: 'Второй вариант', checked: true },
    { id: 'option3', label: 'Третий вариант', checked: false }
  ];
</script>

{#each options as option (option.id)}
  <Checkbox bind:checked={option.checked} label={option.label} />
{/each}

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

  • Использование #each позволяет динамически создавать список чекбоксов из массива данных.
  • Привязка bind:checked к свойству объекта обеспечивает реактивное обновление состояния каждого элемента.
  • Атрибут (option.id) используется для ключа, что оптимизирует повторный рендеринг при изменениях массива.

Контролируемое и неконтролируемое состояние

Чекбоксы можно использовать как контролируемые компоненты (управляемые через состояние) и как неконтролируемые (самостоятельно управляют своим состоянием).

Контролируемый пример:

<script>
  import { Checkbox } from 'carbon-components-svelte';
  let selected = [];
  const options = ['A', 'B', 'C'];
  
  function toggleOption(option) {
    if (selected.includes(option)) {
      selected = selected.filter(o => o !== option);
    } else {
      selected = [...selected, option];
    }
  }
</script>

{#each options as option}
  <Checkbox 
    checked={selected.includes(option)} 
    on:change={() => toggleOption(option)}
    label={option} />
{/each}

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

  • on:change используется для отслеживания клика и изменения состояния.
  • Массив selected хранит выбранные элементы, что удобно для форм и фильтров.
  • Контролируемое состояние позволяет легко интегрировать checkbox с внешними формами или API.

Неконтролируемый пример:

<Checkbox label="Неконтролируемый чекбокс" />
  • Здесь компонент сам управляет своим состоянием, что подходит для простых случаев без необходимости отслеживания выбранных элементов в коде.

Включение и отключение чекбоксов

Атрибут disabled позволяет деактивировать чекбокс:

<Checkbox label="Недоступный вариант" disabled={true} />
  • Деактивированные чекбоксы не могут быть изменены пользователем.
  • При использовании в группе можно комбинировать активные и неактивные варианты.

Частично выбранные состояния (indeterminate)

Для реализации чекбоксов с частичным выбором (например, когда выбраны не все подварианты) используется indeterminate:

<script>
  import { Checkbox } from 'carbon-components-svelte';
  let indeterminate = true;
</script>

<Checkbox label="Выбрано частично" indeterminate={indeterminate} />
  • Атрибут indeterminate устанавливает визуальный индикатор частичного выбора.
  • Это особенно важно для списков с подэлементами или многоуровневыми деревьями выбора.

Стили и модификаторы

Carbon Components Svelte позволяет настраивать внешний вид чекбоксов с помощью модификаторов:

  • label и helperText для пояснений под чекбоксом.
  • size (например, sm, md) для уменьшения или увеличения размера.
  • title для всплывающей подсказки.
<Checkbox 
  label="Маленький вариант" 
  size="sm" 
  helperText="Дополнительное пояснение" 
/>
  • Подписи и helperText автоматически учитывают доступность, включая правильные ARIA-атрибуты.
  • Размеры и helperText не требуют дополнительных CSS-правил — библиотека обрабатывает все стили.

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

Чекбоксы легко интегрируются с формами Svelte, используя реактивные переменные и массивы:

<script>
  import { Checkbox } from 'carbon-components-svelte';
  let selected = [];
  let error = '';
  
  function submitForm() {
    if (selected.length === 0) {
      error = 'Выберите хотя бы один вариант';
    } else {
      error = '';
      // отправка данных
    }
  }
</script>

<form on:submit|preventDefault={submitForm}>
  <Checkbox label="Опция 1" bind:checked={selected.includes('Опция 1')} on:change={() => selected.includes('Опция 1') ? selected = selected.filter(x => x !== 'Опция 1') : selected = [...selected, 'Опция 1']} />
  <Checkbox label="Опция 2" bind:checked={selected.includes('Опция 2')} on:change={() => selected.includes('Опция 2') ? selected = selected.filter(x => x !== 'Опция 2') : selected = [...selected, 'Опция 2']} />
  {#if error}
    <div class="bx--form-requirement">{error}</div>
  {/if}
  <button type="submit">Отправить</button>
</form>
  • Используется реактивная проверка массива выбранных опций.
  • Ошибки валидации отображаются через встроенный CSS-класс Carbon bx--form-requirement.

Взаимодействие с другими компонентами Carbon

Чекбоксы могут комбинироваться с:

  • DataTable для множественного выбора строк.
  • Modal для подтверждения действий с несколькими опциями.
  • Toggle для синхронизации с переключателями включения/выключения.

Пример с DataTable:

<DataTable
  rows={[
    { id: '1', name: 'Пользователь 1' },
    { id: '2', name: 'Пользователь 2' }
  ]}
  columns={[{ id: 'name', header: 'Имя' }]}
  selection="multi"
/>
  • Атрибут selection="multi" автоматически добавляет чекбоксы для множественного выбора строк.

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

Оглавление