Switch

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

Назначение и особенности

Switch применяется в следующих сценариях:

  • включение/отключение функций (например, тёмная тема, уведомления)
  • управление настройками в реальном времени
  • активация режимов работы интерфейса

Ключевые особенности:

  • бинарное состояние (true / false)
  • мгновенная реакция на взаимодействие
  • компактный визуальный элемент
  • поддержка анимации и кастомизации

Базовая реализация в SvelteKit

Простейшая реализация Switch может быть построена на основе обычного input type="checkbox" с кастомным стилем.

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

<label class="switch">
  <input type="checkbox" bind:checked>
  <span class="slider"></span>
</label>

<p>Состояние: {checked ? 'Включено' : 'Выключено'}</p>

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 26px;
  inset: 0;
  transition: 0.3s;
}

.slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

input:checked + .slider {
  background-color: #4caf50;
}

input:checked + .slider::before {
  transform: translateX(24px);
}
</style>

Связывание состояния (Binding)

Svelte предоставляет реактивную привязку через bind:checked, что делает управление состоянием максимально простым.

<input type="checkbox" bind:checked={enabled}>

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

  • автоматическое обновление переменной
  • двусторонняя реактивность
  • отсутствие необходимости в обработчиках событий

Обработка событий

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

<input
  type="checkbox"
  bind:checked={enabled}
  on:change={(e) => handleToggle(e.target.checked)}
>
function handleToggle(value) {
  console.log('Новое состояние:', value);
}

Доступность (Accessibility)

Switch должен быть доступен для всех пользователей:

  • использование role="switch"
  • атрибут aria-checked
  • поддержка клавиатурного управления

Пример:

<button
  role="switch"
  aria-checked={checked}
  on:click={() => checked = !checked}
  class:active={checked}
>
  {checked ? 'ON' : 'OFF'}
</button>

Интеграция с UI-библиотеками

Skeleton

<script>
  import { Switch } from '@skeletonlabs/skeleton';
  let enabled = false;
</script>

<Switch bind:checked={enabled} />

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

  • готовая стилизация
  • поддержка тем
  • адаптивность

Flowbite-Svelte

<script>
  import { Toggle } from 'flowbite-svelte';
  let enabled = true;
</script>

<Toggle bind:checked={enabled} />

Дополнительные возможности:

  • размеры (sm, md, lg)
  • цветовые схемы
  • встроенные анимации

Bits UI

<script>
  import { Switch } from 'bits-ui';
  let checked = false;
</script>

<Switch bind:checked />

Отличительные черты:

  • минималистичный API
  • высокая гибкость кастомизации
  • ориентация на headless-подход

Кастомизация

Изменение размеров

.switch.small {
  width: 40px;
  height: 20px;
}

.switch.large {
  width: 70px;
  height: 34px;
}

Цветовые темы

input:checked + .slider {
  background-color: #2196f3;
}

input:checked + .slider.red {
  background-color: #f44336;
}

Анимации

.slider {
  transition: background-color 0.4s ease;
}

.slider::before {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

Управление через сторы

Switch часто используется вместе со стором:

import { writable } from 'svelte/store';

export const darkMode = writable(false);
<script>
  import { darkMode } from './store';
</script>

<input type="checkbox" bind:checked={$darkMode}>

Преимущества:

  • глобальное состояние
  • синхронизация между компонентами
  • удобство масштабирования

Работа с формами

Switch может быть частью формы:

<form on:submit|preventDefault={submit}>
  <input type="checkbox" bind:checked={subscribe}>
  <button type="submit">Отправить</button>
</form>
function submit() {
  console.log({ subscribe });
}

Контролируемый и неконтролируемый режим

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

<Switch bind:checked={value} />

Состояние полностью управляется извне.

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

<Switch defaultChecked={true} />

Состояние хранится внутри компонента.

Паттерны использования

Группа переключателей

{#each settings as setting}
  <Switch bind:checked={setting.enabled} />
{/each}

Переключение темы

<script>
  import { darkMode } from './store';
</script>

<Switch bind:checked={$darkMode} />

{#if $darkMode}
  <body class="dark" />
{/if}

Асинхронные переключатели

async function toggle(value) {
  loading = true;
  await api.update(value);
  loading = false;
}
<input
  type="checkbox"
  bind:checked={enabled}
  on:change={(e) => toggle(e.target.checked)}
>

Ошибки и подводные камни

1. Потеря синхронизации состояния Использование локального состояния без сторов в крупных приложениях приводит к рассинхронизации.

2. Отсутствие debounce при API-запросах Частые переключения могут перегружать сервер.

3. Игнорирование accessibility Отсутствие ARIA-атрибутов ухудшает доступность.

4. Смешивание контролируемого и неконтролируемого режима Приводит к непредсказуемому поведению.

Оптимизация производительности

  • избегать лишних реактивных вычислений
  • использовать сторы вместо проп-дриллинга
  • минимизировать перерендеринг
  • применять ленивую загрузку компонентов

Расширенные возможности

Индикация загрузки

{#if loading}
  <span>Загрузка...</span>
{:else}
  <Switch bind:checked />
{/if}

Disabled состояние

<input type="checkbox" bind:checked disabled>

Кастомный слот (в UI-библиотеках)

<Switch let:checked>
  <span>{checked ? 'ON' : 'OFF'}</span>
</Switch>

Архитектурные рекомендации

  • выделять Switch как атомарный компонент
  • использовать композицию вместо наследования
  • разделять логику и представление (headless-подход)
  • интегрировать с глобальными сторами

Сравнение с Checkbox

Характеристика Switch Checkbox
Визуальная модель Переключатель Галочка
Использование Настройки Формы
Реакция Мгновенная Часто требует подтверждения
UX Более интуитивный Более формальный

Выводы по применению

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

Оглавление