Switch
Switch применяет бинарную настройку сразу, без отправки формы.
Статус: stable · в системе с 2026-06 · интерактивность: always (всегда)
Когда использовать
- Настройка, применяемая мгновенно, без кнопки «Сохранить»: уведомления, автопродление.
Не использовать:
- Признак в форме, уходящий по отправке.
- Выбор из нескольких режимов — switch только бинарный.
Альтернативы:
checkbox— бинарный признак в форме с отправкойsegmented-control— несколько режимов в одну строку
Конструктор
Меняйте свойства Switch, сочетайте их и проверяйте результат в одном живом экземпляре.
Базовый
Применяется сразу — без кнопки «Сохранить».
<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Switch from "$lib/ui/Switch.svelte";
let notify = $state(true);
let dark = $state(false);
</script>
<div style="display: grid; gap: var(--sp-2); justify-items: start;">
<Switch label={t("Уведомления")} bind:checked={notify} />
<Switch label={t("Тёмная тема")} bind:checked={dark} />
</div>
Поле
Подпись, звёздочка обязательности, подсказка, описание и ошибка.
Поясняющий текст под переключателем.
Нужно включить, чтобы продолжить.
<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Switch from "$lib/ui/Switch.svelte";
</script>
<div style="display: grid; gap: var(--sp-2); justify-items: start;">
<Switch label={t("С подсказкой")} hint={t("Короткое пояснение к переключателю")} />
<Switch label={t("Обязательный")} required />
<Switch label={t("С описанием")} description={t("Поясняющий текст под переключателем.")} />
<Switch label={t("С ошибкой")} error={t("Нужно включить, чтобы продолжить.")} />
</div>
Состояния
Выключено и включено; фокус — кольцо акцента.
<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Switch from "$lib/ui/Switch.svelte";
</script>
<Switch label={t("Выключено")} />
<Switch label={t("Включено")} checked />