Fields Group

Fields Group собирает несколько полей одной строки в одну плашку: рамку, подложку и тень держит строка, поля внутри стоят в сетке через вертикальные делители, справа — ячейка с кнопкой удаления. Фокус в любом поле вдавливает всю строку, как активное поле. Строки задаёт length, ячейки — сниппет с индексом; точка над строками помечает изменённую группу.

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

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

Строка «ключ — значение — условие», которую читают как одно целое: параметры ссылки, лимиты по дням.
Список таких строк с добавлением и удалением, где последняя строка — заготовка.

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

Одно поле в строке — это Combo с обычными полями.
Поля разной природы, которые не читаются как одна запись, — это форма с сеткой.
Строки с сортировкой и выделением — это Table.

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

combo — повторяющиеся строки с одним полем и корзиной
input-select — составное поле из сегментов-селектов

Параметры ссылки

Две строки «ключ — значение» в одной рамке; последняя — заготовка без корзины.

Ключ

Значение

Ключ

Значение

<!--
  🟢

  Параметры ссылки: две строки «ключ — значение» в одной рамке с делителем,
  корзина у первой строки; последняя — заготовка без кнопки.
-->

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

let params = $state([
	{ key: "utm_source", value: "push" },
	{ key: "", value: "" },
]);
</script>

<div style="width: 520px;">
	<FieldsGroup length={params.length} columns={2} changed onremove={(index) => params.splice(index, 1)}>
		{#snippet children({ index })}
			<Input label={t("Ключ")} bind:value={params[index].key} />
			<Input label={t("Значение")} bind:value={params[index].value} />
		{/snippet}
	</FieldsGroup>
</div>