Combo

Combo раскладывает повторяющиеся строки формы — правило таргетинга, пара «ключ — значение», ссылка — колонкой. В каждой строке содержимое по индексу и справа ячейка с кнопкой удаления; у последней строки кнопки нет, пока список не завершён: она служит заготовкой для новой. Сам Combo не знает о полях и не хранит данные: строки задаёт length, содержимое — сниппет с индексом.

Статус: experimental · в системе с 2026-09 · интерактивность: conditional (по конфигурации)

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

Список однотипных строк формы, которые добавляют и удаляют: правила, ссылки, пары параметров.
Последняя строка — пустая заготовка: заполнили — появилась следующая.

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

Строки — несколько полей в одной рамке с делителями — это Fields Group.
Список значений одного поля — это Tag Input.
Строки с сортировкой, выделением и колонками — это Table.

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

fields-group — строка из нескольких полей в одной рамке
tag-input — несколько значений одного поля

Правила

Три строки с полями и корзиной; у последней строки кнопки нет.

Правило 1

Правило 2

Правило 3

<!--
  🟢

  Три строки правил: в каждой поле и кнопка удаления; у последней строки
  кнопки нет — она заготовка для новой.
-->

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

let rules = $state(["utm_source=push", "utm_medium=cpc", ""]);
</script>

<div style="width: 480px;">
	<Combo length={rules.length} onremove={(index) => rules.splice(index, 1)}>
		{#snippet children({ index })}
			<Input label={`${t("Правило")} ${index + 1}`} bind:value={rules[index]} />
		{/snippet}
	</Combo>
</div>

С линиями

Завершённый список с линиями между строками и кнопкой у каждой.

Ссылка 1

Ссылка 2

<!--
  🟢

  Завершённый список ссылок: линии между строками и кнопка удаления у каждой,
  включая последнюю.
-->

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

let links = $state(["https://example.com/a", "https://example.com/b"]);
</script>

<div style="width: 480px;">
	<Combo length={links.length} endOfList separator onremove={(index) => links.splice(index, 1)}>
		{#snippet children({ index })}
			<Input label={`${t("Ссылка")} ${index + 1}`} bind:value={links[index]} />
		{/snippet}
	</Combo>
</div>