Selection controls

Selection controls — это элементы пользовательского интерфейса, позволяющие пользователю выбирать один или несколько вариантов из набора опций. В экосистеме SvelteKit они реализуются через специализированные UI-библиотеки, такие как Svelte Material UI (SMUI), Skeleton UI или Flowbite Svelte, предоставляющие готовые компоненты с поддержкой реактивности и интеграцией с формами.

Основные типы selection controls: checkbox, radio button и switch. Каждый из них имеет свои особенности применения и настройки.

Checkbox

Checkbox используется для множественного выбора. В SvelteKit checkbox реализуется как отдельный компонент с двунаправленной привязкой состояния через bind:checked.

<script>
  import { Checkbox } from '@smui/checkbox';
  let selectedOptions = [];
</script>

<Checkbox bind:group={selectedOptions} value="option1">
  Опция 1
</Checkbox>
<Checkbox bind:group={selectedOptions} value="option2">
  Опция 2
</Checkbox>

<p>Выбранные опции: {selectedOptions.join(', ')}</p>

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

  • Использование bind:group для объединения нескольких чекбоксов в одну группу.
  • Атрибут value определяет идентификатор опции в массиве выбранных значений.
  • Компоненты полностью реактивны, изменения selectedOptions мгновенно отражаются в интерфейсе.

Дополнительно можно управлять состоянием disabled, чтобы запретить выбор определённых опций:

<Checkbox value="option3" disabled>
  Заблокированная опция
</Checkbox>

Radio Button

Radio buttons позволяют выбрать только один вариант из набора. В SvelteKit это реализуется через привязку к одной переменной:

<script>
  import { Radio } from '@smui/radio';
  let selectedOption = 'option1';
</script>

<Radio bind:group={selectedOption} value="option1">
  Опция 1
</Radio>
<Radio bind:group={selectedOption} value="option2">
  Опция 2
</Radio>

<p>Выбрана опция: {selectedOption}</p>

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

  • Привязка bind:group к одной переменной обеспечивает взаимное исключение: только один radio button может быть активным.
  • Возможна динамическая генерация radio buttons через массив опций с использованием {#each}.
<script>
  let options = ['option1', 'option2', 'option3'];
  let selected = 'option1';
</script>

{#each options as option}
  <Radio bind:group={selected} value={option}>
    {option}
  </Radio>
{/each}

Switch

Switch — это визуальный аналог чекбокса с состоянием включено/выключено. В SvelteKit его можно использовать для переключения функций или настройки интерфейса:

<script>
  import { Switch } from '@smui/switch';
  let isEnabled = false;
</script>

<Switch bind:checked={isEnabled}>
  Включить режим
</Switch>

<p>Режим {isEnabled ? 'включен' : 'выключен'}</p>

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

  • bind:checked обеспечивает двунаправленную реактивность.
  • Switch часто используется для управления глобальными состояниями интерфейса, такими как тёмная тема или уведомления.
  • Может быть стилизован через CSS-классы библиотеки или пользовательские стили.

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

Selection controls в SvelteKit UI легко интегрируются с формами, используя реактивные переменные или библиотеку svelte-forms-lib. Пример с формой:

<script>
  import { Checkbox, Radio, Switch } from '@smui/form-field';
  let formData = {
    agree: false,
    gender: 'male',
    notifications: true
  };

  function handleSubmit() {
    console.log(formData);
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <Checkbox bind:checked={formData.agree}>
    Согласие с условиями
  </Checkbox>

  <Radio bind:group={formData.gender} value="male">
    Мужской
  </Radio>
  <Radio bind:group={formData.gender} value="female">
    Женский
  </Radio>

  <Switch bind:checked={formData.notifications}>
    Получать уведомления
  </Switch>

  <button type="submit">Отправить</button>
</form>

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

  • Все selection controls связываются напрямую с объектом формы через реактивные переменные.
  • Обработка submit не требует дополнительных библиотек для простых сценариев.
  • Возможна валидация состояния формы перед отправкой.

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

Большинство SvelteKit UI библиотек поддерживают темы и кастомизацию через CSS-переменные или Tailwind-классы. Например, SMUI позволяет менять цвета переключателей и чекбоксов:

<Checkbox class="text-red-600">
  Красная опция
</Checkbox>

<Switch class="bg-green-500">
  Зеленый переключатель
</Switch>

Дополнительно можно создавать пользовательские компоненты на основе базовых selection controls, добавляя иконки, анимации или комбинированные состояния.

Работа с динамическими данными

Selection controls отлично интегрируются с асинхронными данными. Например, если список опций приходит с API:

<script>
  import { Checkbox } from '@smui/checkbox';
  import { onMount } from 'svelte';
  let options = [];
  let selected = [];

  onMount(async () => {
    const res = await fetch('/api/options');
    options = await res.json();
  });
</script>

{#each options as option}
  <Checkbox bind:group={selected} value={option.id}>
    {option.name}
  </Checkbox>
{/each}

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

  • Реактивность обеспечивает мгновенное обновление состояния выбранных элементов при подгрузке данных.
  • Можно легко комбинировать с локальными фильтрами и сортировками внутри компонента.

Аксессибельность

Selection controls в современных UI-библиотеках для SvelteKit поддерживают стандарт ARIA:

  • role="checkbox" или role="radio"
  • Атрибуты aria-checked, aria-disabled
  • Полная навигация с клавиатуры

Это позволяет создавать интерфейсы, соответствующие WCAG и доступные для пользователей с ограниченными возможностями.

Итоговое использование

Selection controls в SvelteKit UI обеспечивают:

  • Простое связывание состояния через bind.
  • Полную реактивность интерфейса при изменении данных.
  • Лёгкую интеграцию с формами и асинхронными источниками.
  • Стилизацию и кастомизацию под конкретные темы.
  • Поддержку доступности и стандартов ARIA.

Благодаря этим особенностям, компоненты selection controls становятся фундаментальной частью современного SvelteKit-приложения, обеспечивая удобный и визуально приятный интерфейс для выбора и управления опциями.

Оглавление