Stack

Stack ставит детей колонкой с зазором ступени: форма из полей, острова редактора, тело диалога. align выравнивает детей по горизонтали. Это утилита раскладки для потребителей без документа экрана.

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

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

Поля формы одно под другим.
Острова колонки редактора.

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

Колонки рядом — это Grid.
Раскладка целого экрана — документ 42-screen/1.

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

grid — колонки рядом

Колонка формы

Поля одно под другим с зазором m, ниже — блок действий с зазором xl.

Почта

Компания

<!--
  🟢

  Колонка формы (эталон: Vue-легаси structures/verticalGrid): поля одно под
  другим с зазором m, ниже блок действий отбит зазором xl.
-->

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

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

<div style="width: 360px;">
	<Stack gap="xl">
		<Stack gap="m">
			<Input label={t("Почта")} bind:value={email} />
			<Input label={t("Компания")} bind:value={company} />
		</Stack>
		<Stack gap="s" align="flex-start">
			<Button variant="accent">{t("Сохранить")}</Button>
		</Stack>
	</Stack>
</div>