Steps

Steps показывает упорядоченные этапы процесса. Компонент получает items и текущий value, затем сам отмечает завершённые, текущий и предстоящие этапы. Форма bars — полоса сегментов эталона; форма markers — номера в маркерах с соединителями и подписями.

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

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

Процесс заранее разделён на два или больше устойчивых этапа.
Нужно показать, что уже пройдено, где находится пользователь и что будет дальше.

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

Нужно измерить непрерывный ход одной операции — используй Progress.
Нужно показать положение страницы в иерархии — используй Breadcrumbs.
Пользователь должен переходить между разделами — используй навигационный компонент.

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

progress — Непрерывная или числовая готовность одной операции.
breadcrumbs — Иерархический путь к текущей странице, а не этапы процесса.

Базовый процесс

Текущий этап делит последовательность на завершённую и предстоящую части.

Бриф
Дизайн
Проверка
Публикация

<!--
  🟢

  Базовый пример Steps показывает четыре этапа публикации.
  Текущий value автоматически отделяет завершённые этапы от предстоящих.
-->

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

const items = [
	{ value: "brief", label: t("Бриф") },
	{ value: "design", label: t("Дизайн") },
	{ value: "review", label: t("Проверка") },
	{ value: "release", label: t("Публикация") },
];
</script>

<Steps {items} value="review" />

Положение этапа

Первый, промежуточный и последний value вычисляют состояние всей последовательности.

Черновик
Согласование
Опубликовано

Черновик
Согласование
Опубликовано

Черновик
Согласование
Опубликовано

<!--
  🟢

  Пример положения этапа сравнивает начало, середину и конец процесса.
  Все три последовательности статичны и отличаются только текущим value.
-->

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

const items = [
	{ value: "draft", label: t("Черновик") },
	{ value: "approval", label: t("Согласование") },
	{ value: "published", label: t("Опубликовано") },
];
</script>

<Steps {items} value="draft" ariaLabel={t("Процесс в начале")} />
<Steps {items} value="approval" ariaLabel={t("Процесс в середине")} />
<Steps {items} value="published" ariaLabel={t("Завершённый процесс")} />

Короткий процесс

Два коротких этапа используют тот же контракт без отдельного размера.

План
Результат

<!--
  🟢

  Компактный пример Steps использует только два коротких этапа.
  Отдельный size не нужен: геометрия остаётся общей для любого процесса.
-->

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

const items = [
	{ value: "plan", label: t("План") },
	{ value: "result", label: t("Результат") },
];
</script>

<Steps {items} value="plan" ariaLabel={t("Короткий процесс")} />

Маркеры с подписями

Форма markers: номера в маркерах, соединители и видимые названия этапов.

Кампания
Таргетинг
Креативы
Проверка

<!--
  🟢

  Форма markers: номера в маркерах, соединители и видимые названия этапов —
  расширение канона для индикатора, который стоит отдельно от содержимого
  шага.
-->

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

const items = [
	{ value: "campaign", label: t("Кампания") },
	{ value: "targeting", label: t("Таргетинг") },
	{ value: "creatives", label: t("Креативы") },
	{ value: "review", label: t("Проверка") },
];
</script>

<Steps {items} value="creatives" variant="markers" />