Form Modal

Form Modal раскладывает полноэкранную форму создания или редактирования: слева необязательная боковая колонка, справа ссылка возврата, заголовок и поля с одинаковым ритмом. Имя унаследовано от эталона: это не модальное окно — затемнения и ловушки фокуса нет, форма живёт как страница.

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

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

Создание или редактирование сущности на отдельной странице с возвратом к списку.

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

Короткая задача поверх экрана — это Dialog.
Страница с разделами и сводкой — это редактор сущности с Aside и Space.

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

dialog — модальная задача поверх экрана
page-header — титул страницы со стрелкой возврата и действиями
space — раздел страницы с заголовком

Форма создания

Ссылка «Назад», заголовок «Новая кампания» и три поля с ритмом.

<!--
  🟢

  Форма создания: ссылка «Назад», заголовок и три поля с одинаковым ритмом.
-->

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

let name = $state("");
let url = $state("");
</script>

<div style="width: 480px;">
	<FormModal title={t("Новая кампания")} back="#">
		<Input label={t("Название")} bind:value={name} />
		<Input label={t("Ссылка")} bind:value={url} />
		<div><Button variant="accent">{t("Создать")}</Button></div>
	</FormModal>
</div>