Checkbox Group

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

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

Множественный выбор из короткого набора с общей темой: 2–7 пунктов под одной подписью.

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

Один независимый признак — группа не нужна.
Выбор ровно одного значения.
Длинный список, где нужны поиск и обзор выбранного.

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

checkbox — один признак
radio — выбор одного значения
dualist — множественный выбор из длинного списка

Конструктор

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

Каналы уведомлений

E-mail

SMS

Push-уведомления

Базовая группа

Общая подпись через legend, выбор нескольких пунктов.

Каналы уведомлений

E-mail

SMS

Push-уведомления

Выбрано: email

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

let value = $state(["email"]);

const items = [
  { value: "email", label: "E-mail" },
  { value: "sms", label: "SMS" },
  { value: "push", label: t("Push-уведомления") },
  { value: "telegram", label: "Telegram" },
];
</script>

<div style="display: grid; gap: var(--sp-2);">
  <CheckboxGroup legend={t("Каналы уведомлений")} name="channels" {items} bind:value />
  <p style="color: var(--c-text-muted); font-size: var(--fs-s);">
    {t("Выбрано:")} {value.join(", ") || "—"}
  </p>
</div>

Порядок колонок

Выбор видимых колонок и изменение их порядка через bind:items.

Колонки таблицы

Кампания

Статус

Бюджет

Дата создания

Порядок: Кампания → Статус → Бюджет → Дата создания

<!--
  🟢

  Пример показывает настройку видимости и порядка колонок одним Checkbox Group.
  Рукоятки меняют bindable items, поэтому новый порядок сразу доступен продукту.
-->

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

let value = $state(["campaign", "status", "budget"]);
let items = $state([
	{ value: "campaign", label: t("Кампания") },
	{ value: "status", label: t("Статус") },
	{ value: "budget", label: t("Бюджет") },
	{ value: "created", label: t("Дата создания") },
]);
</script>

<div style="display: grid; gap: var(--sp-2);">
	<CheckboxGroup
		legend={t("Колонки таблицы")}
		name="columns"
		reorderable
		bind:items
		bind:value
	/>
	<p style="color: var(--c-text-muted); font-size: var(--fs-s);">
		{t("Порядок:")} {items.map((item) => item.label).join(" → ")}
	</p>
</div>