Toggle Group

Toggle Group объединяет минимум две текстовые toggle-кнопки. selectionMode явно связывает семантику выбора с формой value: строкой для single и уникальным массивом строк для multiple.

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

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

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

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

Нужен один самостоятельный двоичный режим — используй Toggle Button.
Один режим должен быть выбран всегда и варианты читаются как представления — используй Segmented Control.
Варианты длинные, требуют описаний или располагаются вертикально — используй Checkbox или Radio.

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

toggle-button — один самостоятельный двоичный режим
segmented-control — компактный взаимоисключающий режим с обязательным выбором
checkbox — вертикальный форм-выбор с длинной подписью

Один выбор

Повторное нажатие снимает единственный выбранный режим.

Представление

Выбрано: ничего

<!--
  🟢

  Одиночный пример Toggle Group переключает представление рабочей области.
  Повторное нажатие на выбранный пункт честно возвращает пустую строку.
-->

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

const items = [
	{ value: "list", label: t("Список") },
	{ value: "board", label: t("Доска") },
	{ value: "calendar", label: t("Календарь") },
];

let view = $state("");
</script>

<div style="display: grid; gap: var(--sp-2); justify-items: start;">
	<ToggleGroup
		selectionMode="single"
		{items}
		label={t("Представление")}
		bind:value={view}
	/>
	<p style="margin: var(--sp-0); font-size: var(--fs-s);">
		{t("Выбрано:")} <code>{view || t("ничего")}</code>
	</p>
</div>

Несколько режимов

Каждый пункт включается и снимается независимо.

Слои макета

Включено: grid

<!--
  🟢

  Множественный пример Toggle Group включает независимые слои макета.
  Bindable value остаётся уникальным массивом выбранных идентификаторов.
-->

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

const items = [
	{ value: "grid", label: t("Сетка") },
	{ value: "guides", label: t("Направляющие") },
	{ value: "baseline", label: t("Базовые линии") },
];

let layers = $state(["grid"]);
</script>

<div style="display: grid; gap: var(--sp-2); justify-items: start;">
	<ToggleGroup
		selectionMode="multiple"
		{items}
		label={t("Слои макета")}
		bind:value={layers}
	/>
	<p style="margin: var(--sp-0); font-size: var(--fs-s);">
		{t("Включено:")} <code>{layers.length ? layers.join(", ") : t("ничего")}</code>
	</p>
</div>

Размеры

Вся группа использует единую плотность s или m.

Выравнивание, s

Выравнивание, m

<!--
  🟢

  Пример размеров сравнивает плотную и обычную группы выравнивания.
  Размер применяется ко всей коллекции и не меняет single-семантику.
-->

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

const items = [
	{ value: "left", label: t("Слева") },
	{ value: "center", label: t("По центру") },
	{ value: "right", label: t("Справа") },
];

let compact = $state("left");
let regular = $state("center");
</script>

<div style="display: grid; gap: var(--sp-3); justify-items: start;">
	<ToggleGroup
		selectionMode="single"
		{items}
		size="s"
		label={t("Выравнивание, s")}
		bind:value={compact}
	/>
	<ToggleGroup
		selectionMode="single"
		{items}
		size="m"
		label={t("Выравнивание, m")}
		bind:value={regular}
	/>
</div>