Picker

Picker раскладывает варианты плитками в сетку: у каждой иконка, название и описание. Клик выбирает плитку — она получает подложку и рамку акцента и уголок с галочкой; повторный клик снимает выбор, если unpickable. Один выбор на группу; закреплённые варианты помечены булавкой.

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

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

Выбор формата, тарифа или типа кампании, где каждому варианту нужны картинка и пояснение.
Выбор площадки или источника трафика из нескольких с описанием условий.
Один выбор из 3–9 вариантов, которые важно видеть все сразу.

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

Вариантов больше десятка или их надо искать — это Select или Combobox.
Выбор нескольких вариантов — это Checkbox Group.
Варианты — только слова без картинки и описания — это Radio.

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

radio — один выбор среди коротких подписей; variant=images — плитки с картинкой без описания
select — длинный список вариантов в раскрывающейся панели
checkbox-group — несколько вариантов сразу

Выбор формата

Три плитки с названием и описанием; выбранная получает уголок с галочкой.

<!--
  🟢

  Выбор формата кампании: три плитки с названием и описанием, выбранная
  получает подложку и рамку акцента и уголок с галочкой.
-->

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

const items = [
	{ value: "push", text: "Push", description: t("Уведомления на устройство\nCPC от $0.01") },
	{ value: "native", text: "Native", description: t("Тизеры в ленте площадки\nCPM от $0.50") },
	{ value: "popunder", text: "Popunder", description: t("Полноэкранный переход\nCPM от $1.20") },
];

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

<div style="width: 560px;">
	<Picker {items} bind:value label={t("Формат кампании")} />
</div>

Закреплённый вариант

Булавка у закреплённой плитки, две колонки, снятие выбора повторным кликом.

<!--
  🟢

  Две колонки, закреплённый вариант с булавкой и снятие выбора повторным
  кликом по выбранной плитке.
-->

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

const items = [
	{ value: "card", text: t("Карта"), description: "Visa, Mastercard", pinned: true },
	{ value: "crypto", text: t("Криптовалюта"), description: "USDT, BTC" },
	{ value: "wire", text: t("Перевод"), description: t("SWIFT, от $500") },
	{ value: "paypal", text: "PayPal", description: t("Комиссия 4%") },
];

let value = $state(null);
</script>

<div style="width: 480px;">
	<Picker {items} bind:value columns={2} label={t("Способ оплаты")} />
</div>