Select Toggle

Select Toggle собирает фильтр таргетинга: Segmented Control с двумя режимами и под ним Multi Select со значениями. Режим type говорит, как читать список — включить эти значения или исключить их. Оба значения bindable; сами варианты приходят options.

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

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

Таргетинг по странам, устройствам, площадкам: список и режим «кроме».

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

Список без режима исключения — это Multi Select.
Режим без списка — это Segmented Control.

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

multi-select — список значений без режима
segmented-control — переключатель режима сам по себе

Таргетинг по странам

Режим и список стран; сводка ниже читает оба значения.

Страны

США Канада

Включить: US, CA

<!--
  🟢

  Режим «включить / исключить» и список стран; сводка ниже читает оба значения.
-->

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

let type = $state("include");
let value = $state(["US", "CA"]);
const options = [
	{ value: "US", label: t("США") },
	{ value: "CA", label: t("Канада") },
	{ value: "UK", label: t("Великобритания") },
	{ value: "DE", label: t("Германия") },
];
</script>

<div style="width: 320px; display: flex; flex-direction: column; gap: var(--sp-2);">
	<SelectToggle bind:type bind:value {options} label={t("Страны")} />
	<span style="font-size: var(--fs-s); color: var(--c-text-muted);">
		{type === "include" ? t("Включить") : t("Исключить")}: {value.join(", ") || "—"}
	</span>
</div>