Компонент Checkbox

Компонент Checkbox в SvelteKit UI представляет собой базовый элемент формы, предназначенный для выбора одного или нескольких вариантов из множества. В отличие от стандартного HTML-элемента <input type="checkbox">, SvelteKit предоставляет расширенные возможности кастомизации, реактивности и интеграции с состоянием приложения.

Создание базового Checkbox

В SvelteKit UI компонент создается с использованием тега <Checkbox> с обязательным указанием bind:value для реактивного связывания состояния.

<script>
  import { Checkbox } from 'sveltekit-ui';
  let accepted = false;
</script>

<Checkbox bind:value={accepted}>
  Я принимаю условия
</Checkbox>

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

  • bind:value обеспечивает двустороннее связывание: при изменении состояния компонента переменная accepted автоматически обновляется.
  • Внутри тега можно размещать текст или другие элементы, которые будут отображаться рядом с чекбоксом.

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

SvelteKit UI позволяет легко изменять внешний вид чекбокса через props и CSS-переменные.

<Checkbox bind:value={accepted} color="primary" size="lg">
  Подписка на новости
</Checkbox>

Props, влияющие на внешний вид:

  • color – задает основной цвет активного состояния (primary, secondary, success, danger).
  • size – размер компонента (sm, md, lg).
  • disabled – делает чекбокс недоступным для взаимодействия.
  • indeterminate – задает промежуточное состояние, полезное при выборе части элементов в группе.

Работа с группой чекбоксов

Для выбора нескольких вариантов можно использовать массив и привязку через bind:group.

<script>
  import { Checkbox } from 'sveltekit-ui';
  let selectedFruits = [];
</script>

<Checkbox value="apple" bind:group={selectedFruits}>Яблоко</Checkbox>
<Checkbox value="banana" bind:group={selectedFruits}>Банан</Checkbox>
<Checkbox value="orange" bind:group={selectedFruits}>Апельсин</Checkbox>

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

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

Промежуточное состояние (Indeterminate)

Часто возникает необходимость отображать состояние, когда часть элементов выбрана, но не все. SvelteKit UI поддерживает indeterminate:

<script>
  import { Checkbox } from 'sveltekit-ui';
  let allSelected = false;
  let someSelected = true;
</script>

<Checkbox bind:value={allSelected} indeterminate={someSelected}>
  Выбрать все
</Checkbox>
  • Свойство indeterminate визуально отображает частичное выделение.
  • Оно не влияет на реальное значение переменной, а лишь на визуальный индикатор.

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

Checkbox идеально интегрируется с формами, включая библиотеки валидации, такие как svelte-forms-lib или sveltekit-form.

<script>
  import { Checkbox } from 'sveltekit-ui';
  import { useForm } from 'sveltekit-form';
  
  const { form, handleSubmit } = useForm({
    accepted: false
  });
  
  function onSubmit(data) {
    console.log(data);
  }
</script>

<form on:submit|preventDefault={handleSubmit(onSubmit)}>
  <Checkbox bind:value={form.accepted}>Согласен с правилами</Checkbox>
  <button type="submit">Отправить</button>
</form>
  • Двусторонняя привязка через bind:value обеспечивает автоматическое обновление данных формы.
  • Поддерживается динамическая валидация и управление состоянием отправки.

Доступность и семантика

SvelteKit UI Checkbox строится с соблюдением стандартов ARIA:

  • Атрибут aria-checked автоматически синхронизируется с состоянием.
  • При использовании indeterminate устанавливается aria-checked="mixed".
  • Поддержка клавиатурной навигации (Space для переключения состояния).

События и обработчики

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

  • on:change – вызывается при изменении состояния.
  • on:focus и on:blur – полезны для управления фокусом.
<Checkbox bind:value={accepted} on:change={() => console.log('Изменено:', accepted)}>
  Я подтверждаю
</Checkbox>
  • Значение переменной accepted всегда актуально в обработчике.
  • Можно комбинировать с реактивными $: для автоматической обработки изменений.

Динамическое управление состоянием

С помощью реактивных выражений можно динамически включать или выключать чекбокс:

<script>
  import { Checkbox } from 'sveltekit-ui';
  let accepted = false;
  let disabledCondition = false;
  
  $: disabled = !accepted && disabledCondition;
</script>

<Checkbox bind:value={accepted} disabled={disabled}>
  Доступно при выполнении условия
</Checkbox>
  • Свойство disabled может зависеть от любой логики приложения.
  • Реактивные выражения обеспечивают мгновенное обновление состояния интерфейса.

Итоговые рекомендации по использованию

  • Использовать bind:value и bind:group для простого управления состоянием.
  • Применять indeterminate для группового выбора.
  • Настраивать внешний вид через color и size.
  • Интегрировать с формами для комплексной логики.
  • Обеспечивать доступность с помощью встроенных ARIA-атрибутов.

Checkbox в SvelteKit UI является мощным инструментом для создания интерактивных и доступных интерфейсов, обеспечивая гибкость и полную реактивность без сложной дополнительной логики.

Оглавление