Checkbox

Checkbox сохраняет решение до отправки формы. indeterminate показывает частичный выбор агрегата, но не создаёт третье значение.

Статус: stable · в системе с 2026-06 · интерактивность: always (всегда)

Когда использовать

Один независимый признак применяется при отправке формы: согласие, подписка или дополнительная опция.
Выбор явно названной карточки или строки перед групповым действием; labelHidden убирает повторную подпись.
Родитель «Выбрать всё» отражает частичный выбор дочернего списка через indeterminate.

Не использовать:

Изменение должно примениться мгновенно без отдельной отправки.
Пользователь выбирает ровно один вариант из взаимоисключающего набора.
Несколько связанных признаков нуждаются в общей подписи и общей валидации.

Альтернативы:

switch — настройка применяется немедленно
radio — нужно выбрать ровно один взаимоисключающий вариант
checkbox-group — несколько связанных признаков образуют один вопрос

Конструктор

Меняйте свойства Checkbox, сочетайте их и проверяйте результат в одном живом экземпляре.

Согласен с условиями

Базовый

Независимое решение с обязательной видимой подписью.

Согласен с условиями

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Checkbox from "$lib/ui/Checkbox.svelte";

let agree = $state(false);
</script>

<Checkbox label={t("Согласен с условиями")} bind:checked={agree} />

Состояния выбора

Unchecked, checked и производное indeterminate без противоречащих флагов.

Пусто

Описание под чекбоксом.

Выбрано

Описание под чекбоксом.

Indeterminate

Описание под чекбоксом.

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Checkbox from "$lib/ui/Checkbox.svelte";
</script>

<div style="display: grid; gap: var(--sp-2);">
  <Checkbox label={t("Пусто")} required description={t("Описание под чекбоксом.")} />
  <Checkbox label={t("Выбрано")} checked required description={t("Описание под чекбоксом.")} />
  <Checkbox label="Indeterminate" indeterminate required description={t("Описание под чекбоксом.")} />
</div>

Поле

Required с name, подсказка, description и приоритетный error.

С подсказкой

Обязательный

С описанием

Поясняющий текст под чекбоксом.

С ошибкой

Это поле обязательно к заполнению.

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Checkbox from "$lib/ui/Checkbox.svelte";
</script>

<div style="display: grid; gap: var(--sp-2);">
  <Checkbox label={t("С подсказкой")} hint={t("Короткое пояснение к полю")} />
  <Checkbox label={t("Обязательный")} name="agreement" required />
  <Checkbox label={t("С описанием")} description={t("Поясняющий текст под чекбоксом.")} />
  <Checkbox label={t("С ошибкой")} error={t("Это поле обязательно к заполнению.")} />
</div>

Выбрать всё

Родитель вычисляет checked и indeterminate из дочерних значений.

Выбрать всё

Аналитика

Маркетинг

Персонализация

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Checkbox from "$lib/ui/Checkbox.svelte";

let opts = $state({ a: true, b: false, c: false });
let all = $derived(opts.a && opts.b && opts.c);
let some = $derived((opts.a || opts.b || opts.c) && !all);

function toggleAll(v) {
  opts = { a: v, b: v, c: v };
}
</script>

<div style="display: grid; gap: var(--sp-2);">
  <Checkbox label={t("Выбрать всё")} checked={all} indeterminate={some} onCheckedChange={toggleAll} />
  <div style="display: grid; gap: var(--sp-1); padding-left: var(--sp-3);">
    <Checkbox label={t("Аналитика")} bind:checked={opts.a} />
    <Checkbox label={t("Маркетинг")} bind:checked={opts.b} />
    <Checkbox label={t("Персонализация")} bind:checked={opts.c} />
  </div>
</div>