Checkbox и Switch

Основы компонентов Checkbox

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

Пример базового использования:

<script>
  let accepted = false;
</script>

<input type="checkbox" bind:checked={accepted} />
<label>Согласен с условиями</label>

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

  • bind:checked позволяет автоматически синхронизировать состояние компонента с переменной.
  • Можно управлять состоянием через булевы значения (true/false) или массивы для группы чекбоксов.

Группы чекбоксов

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

<script>
  let selectedFruits = [];
  const fruits = ['Яблоко', 'Банан', 'Вишня'];
</script>

{#each fruits as fruit}
  <label>
    <input
      type="checkbox"
      value={fruit}
      on:change="{() => toggleFruit(fruit)}"
      checked={selectedFruits.includes(fruit)}
    />
    {fruit}
  </label>
{/each}

<script>
  function toggleFruit(fruit) {
    if (selectedFruits.includes(fruit)) {
      selectedFruits = selectedFruits.filter(f => f !== fruit);
    } else {
      selectedFruits = [...selectedFruits, fruit];
    }
  }
</script>

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

  • checked={selectedFruits.includes(fruit)} обеспечивает визуальную синхронизацию состояния.
  • Использование on:change позволяет контролировать добавление и удаление элементов из массива.

Стилизация Checkbox

SvelteKit UI-библиотеки, такие как Svelte Material UI, SvelteStrap или Flowbite Svelte, предоставляют готовые компоненты с расширенными стилями.

Пример кастомного Checkbox с Tailwind:

<label class="flex items-center space-x-2">
  <input type="checkbox" bind:checked={accepted} class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500" />
  <span>Принять правила</span>
</label>

Советы по стилям:

  • Использовать focus:ring для доступности.
  • Управлять размерами через классы Tailwind (w-5 h-5).
  • Для темы свет/тёмная использовать условные классы.

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

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

Пример базового Switch в Svelte:

<script>
  let isEnabled = false;
</script>

<label class="flex items-center cursor-pointer">
  <div class="relative">
    <input type="checkbox" bind:checked={isEnabled} class="sr-only" />
    <div class="w-10 h-4 bg-gray-300 rounded-full shadow-inner"></div>
    <div
      class="dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition"
      class:translate-x-full={isEnabled}
    ></div>
  </div>
  <span class="ml-3 text-gray-700">Включить уведомления</span>
</label>

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

  • Использование sr-only для скрытия оригинального чекбокса и обеспечения доступности.
  • Анимация переключения достигается через CSS-классы и условные классы Svelte (class:translate-x-full={isEnabled}).
  • Можно подключать Tailwind-плагины или UI-библиотеки для готовых Switch с анимацией.

Управление состоянием и события

Checkbox и Switch поддерживают стандартные события формы:

  • change — срабатывает при изменении состояния.
  • input — более детальное отслеживание ввода.
  • bind:checked обеспечивает реактивную привязку состояния к переменной.

Пример логирования изменений:

<input type="checkbox" bind:checked={accepted} on:change="{() => console.log(accepted)}" />

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

Checkbox и Switch можно использовать в составе форм с валидацией:

<script>
  let termsAccepted = false;

  function handleSubmit() {
    if (!termsAccepted) {
      alert('Необходимо принять условия');
      return;
    }
    console.log('Форма отправлена');
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <label>
    <input type="checkbox" bind:checked={termsAccepted} />
    Принять условия
  </label>
  <button type="submit" class="mt-2 px-4 py-2 bg-blue-600 text-white rounded">Отправить</button>
</form>

Особенности интеграции:

  • on:submit|preventDefault предотвращает стандартное поведение формы.
  • Проверка состояния checkbox перед отправкой позволяет реализовать обязательные поля.

Дополнительные возможности UI-библиотек

  • Svelte Material UI (SMUI): предоставляет Checkbox и Switch с анимацией ripple и готовой стилизацией под Material Design.
  • Flowbite Svelte: содержит Checkbox с темной темой и встроенные transition для Switch.
  • SvelteStrap: интеграция с Bootstrap стилями, поддержка групп чекбоксов и переключателей.

Эти библиотеки упрощают реализацию, избавляя от ручного написания стилей и анимаций, а также обеспечивают готовую доступность (aria-* атрибуты, focus states).

Советы по лучшим практикам

  • Использовать bind:checked для реактивного управления состоянием.
  • Всегда учитывать доступность: скрытый input для Switch с sr-only, корректные label.
  • Для групп checkbox лучше работать с массивами и функциями добавления/удаления значений.
  • Использовать UI-библиотеки для сложных интерфейсов, где важна анимация и единый стиль.

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

Оглавление