Ход бизнес-процесса без навигации по шагам степпер показывает сам: без пропа interactive шаги некликабельны, а шапка без items работает как трекер статуса — см. сценарий «Статус заявки». Компонент CdsStages, решавший ту же задачу, устарел. Для равнозначных разделов, между которыми переключаются в любом порядке, — CdsTabs.

Анатомия

Степпер состоит из шапки с шагами, контентной части и кнопок навигации — последние две появляются, когда шаги заданы через items. Каждый шаг — это индикатор состояния с линией прогресса до следующего шага, заголовок и описание.

Storybook

Вариации

Шаги из массива

Передайте в items массив объектов — заголовок, описание и значение шага читаются по ключам item-title, item-text и item-value (по умолчанию title, text, значение — порядковый номер шага, начиная с единицы). Контент шага задают слоты item.{value} или общий item, а кнопки «Назад» / «Далее» рендерятся автоматически: тексты меняются пропами prev-text / next-text, скрыть кнопки — hide-actions.

Sandbox Storybook

<script setup lang="ts">
import { CdsCard, CdsSteps } from '@central-design-system/components';
import { ref } from 'vue';

const step = ref(1);
const items = [
  { title: 'ФИО', text: 'Имя и фамилия' },
  { title: 'Паспортные данные', text: 'Номер паспорта и дата рождения' },
  { title: 'Способ оплаты', text: 'Данные банковской карты' },
  { title: 'Подтверждение', text: 'Код из смс' }
];
</script>

<template>
  <div class="m-auto max-w-[750px]">
    <CdsSteps v-model="step" :items="items">
      <template v-for="(item, index) in items" :key="item.title" #[`item.${index+1}`]>
        <CdsCard :title="item.title" :text="`Контент шага «${item.title}»: ${item.text.toLowerCase()}.`" borderless />
      </template>
    </CdsSteps>
  </div>
</template>

Состояния

Шаги можно объявить и вручную — компонентами CdsStepsItem в слоте по умолчанию: рендерится только шапка, контент и навигация остаются за вами. У шага три состояния: error — завершён с ошибкой, warning — требует внимания, disabled — недоступен.

Sandbox Storybook

<script setup lang="ts">
import { CdsSteps, CdsStepsItem } from '@central-design-system/components';
import { ref } from 'vue';

const step = ref(1);
</script>

<template>
  <CdsSteps v-model="step">
    <CdsStepsItem title="ФИО" text="Имя и фамилия" />
    <CdsStepsItem title="Паспортные данные" error text="Номер паспорта и дата рождения" />
    <CdsStepsItem title="Способ оплаты" disabled text="Данные банковской карты" />
    <CdsStepsItem title="Подтверждение" warning text="Код из смс" />
  </CdsSteps>
</template>

Интерактивные шаги

Проп interactive разрешает переходить на любой шаг кликом или с клавиатуры — прогресс анимируется каскадно, disabled-шаги пропускаются. Проп readonly отключает переходы, сохраняя внешний вид.

Sandbox Storybook

<script setup lang="ts">
import { CdsSteps, CdsStepsItem } from '@central-design-system/components';
import { ref } from 'vue';

const step = ref(2);
</script>

<template>
  <CdsSteps v-model="step" interactive>
    <CdsStepsItem title="ФИО" text="Имя и фамилия" />
    <CdsStepsItem title="Паспортные данные" text="Номер паспорта и дата рождения" />
    <CdsStepsItem title="Способ оплаты" text="Данные банковской карты" />
    <CdsStepsItem title="Подтверждение" text="Код из смс" />
  </CdsSteps>
</template>

Вертикальная компоновка

Проп vertical разворачивает шапку в столбец — подходит для трекеров статуса и узких панелей.

Sandbox Storybook

<script setup lang="ts">
import { CdsSteps, CdsStepsItem } from '@central-design-system/components';
import { ref } from 'vue';

const step = ref(0);
</script>

<template>
  <div class="flex h-[350px] w-full items-center justify-center">
    <CdsSteps v-model="step" vertical interactive>
      <CdsStepsItem title="ФИО" text="Имя и фамилия" />
      <CdsStepsItem title="Паспортные данные" text="Номер паспорта и дата рождения" />
      <CdsStepsItem title="Способ оплаты" text="Данные банковской карты" />
      <CdsStepsItem title="Подтверждение" text="Код из смс" />
    </CdsSteps>
  </div>
</template>

Слоты

Слоты дают контроль над каждой зоной степпера:

Слот	Описание
default	Свои CdsStepsItem, когда items не задан
title, text	Заголовок и описание каждого шага
header-item, header-item.{value}	Полная замена контента шага в шапке
item, item.{value}	Контент шага в контентной части
actions	Свои кнопки навигации (получает методы prev / next)
prev, next	Замена отдельной кнопки внутри стандартного блока навигации

Слоты title и text получают состояние шага (selected, complete, error, first, last…) — удобно дорисовывать теги и подсказки.

Sandbox Storybook

<script setup lang="ts">
import { CdsIcon, CdsSteps, CdsStepsItem, CdsTag, CdsTooltip } from '@central-design-system/components';
import { ref } from 'vue';

const step = ref(3);
const items = [
  { title: 'ФИО', text: 'Имя и фамилия' },
  { title: 'Паспортные данные', text: 'Номер паспорта и дата рождения', error: true },
  { title: 'Способ оплаты', text: 'Данные банковской карты', disabled: true },
  { title: 'Подтверждение', text: 'Код из смс' }
];
</script>

<template>
  <CdsSteps v-model="step">
    <CdsStepsItem v-for="item in items" :key="item.title" :disabled="item.disabled" :error="item.error">
      <template #title>
        <span class="inline-flex items-center gap-1">
          {{ item.title }}
          <CdsTag v-if="!item.disabled" text="Доступ" />
        </span>
      </template>
      <template #text="{ last }">
        <span class="inline-flex items-center gap-1">
          <CdsTooltip v-if="last">
            <template #activator="{ props }">
              <CdsIcon icon="info" v-bind="props" />
            </template>
            Push уведомления
          </CdsTooltip>
          {{ item.text }}
        </span>
      </template>
    </CdsStepsItem>
  </CdsSteps>
</template>

Модель

Активный шаг управляется через v-model. У шагов из items значение по умолчанию — порядковый номер с единицы, у объявленных вручную — индекс с нуля; своё значение задаётся ключом item-value или пропом value у CdsStepsItem. Методы prev / next доступны через ref компонента.

Sandbox Storybook

<script setup lang="ts">
import { CdsFunctionalButton, CdsSteps, CdsStepsItem } from '@central-design-system/components';
import { ref } from 'vue';

const step = ref(2);
const items = [
  { title: 'ФИО', text: 'Имя и фамилия' },
  { title: 'Паспортные данные', text: 'Номер паспорта и дата рождения' },
  { title: 'Способ оплаты', text: 'Данные банковской карты' },
  { title: 'Подтверждение', text: 'Код из смс' }
];
const next = () => {
  if (step.value < items.length - 1) step.value++;
};
const prev = () => {
  if (step.value > 0) step.value--;
};
</script>

<template>
  <div>
    <div class="mb-4 flex w-full items-center justify-center gap-2">
      <CdsFunctionalButton icon="chevron-left" @click="prev" />
      v-model: {{ step }}
      <CdsFunctionalButton icon="chevron-right" @click="next" />
    </div>
    <CdsSteps v-model="step">
      <CdsStepsItem v-for="item in items" :key="item.title" :title="item.title" :text="item.text" />
    </CdsSteps>
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Мастер оформления

Классический мастер: каждому шагу — свой слот item.{value} с формой. Встроенные кнопки листают шаги, а поля привязаны к общему состоянию через v-model, поэтому данные не теряются при переходах.

Sandbox Storybook

<script setup lang="ts">
import { CdsForm, CdsRadio, CdsRadioGroup, CdsSteps, CdsTextInput } from '@central-design-system/components';
import { ref } from 'vue';

const step = ref(1);
const city = ref('');
const address = ref('');
const payment = ref('card');

const items = [
  { title: 'Доставка', text: 'Город и адрес' },
  { title: 'Оплата', text: 'Способ оплаты' },
  { title: 'Проверка', text: 'Данные заказа' }
];
</script>

<template>
  <div class="m-auto max-w-[750px]">
    <CdsSteps v-model="step" :items="items">
      <template #[`item.1`]>
        <CdsForm class="m-auto flex w-[350px] flex-col gap-2 py-2">
          <CdsTextInput v-model="city" label="Город" placeholder="Москва" />
          <CdsTextInput v-model="address" label="Адрес" placeholder="Улица, дом, офис" />
        </CdsForm>
      </template>

      <template #[`item.2`]>
        <CdsRadioGroup v-model="payment" label="Как оплатите заказ?" class="m-auto w-[350px] py-2" hide-details>
          <CdsRadio value="card" label="Банковской картой" />
          <CdsRadio value="invoice" label="Счётом на компанию" />
        </CdsRadioGroup>
      </template>

      <template #[`item.3`]>
        <div class="m-auto flex w-[350px] flex-col gap-1 py-2">
          <p>Доставка: {{ [city, address].filter(Boolean).join(', ') || 'не указана' }}</p>
          <p>Оплата: {{ payment === 'card' ? 'банковской картой' : 'счётом на компанию' }}</p>
        </div>
      </template>
    </CdsSteps>
  </div>
</template>

Подтверждение перед переходом

Слот actions заменяет встроенные кнопки и получает методы prev и next — условия перехода вы определяете сами. Здесь кнопка «Далее» заблокирована, пока пользователь не примет условия обслуживания.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsCheckbox, CdsSteps } from '@central-design-system/components';
import { ref } from 'vue';

const step = ref(1);
const agreed = ref(false);

const items = [
  { title: 'Условия', text: 'Договор оферты' },
  { title: 'Данные', text: 'Реквизиты компании' },
  { title: 'Готово', text: 'Заявка отправлена' }
];
</script>

<template>
  <div class="m-auto max-w-[750px]">
    <CdsSteps v-model="step" :items="items">
      <template #[`item.1`]>
        <div class="m-auto flex w-[350px] flex-col gap-2 py-2">
          <p>Перед заполнением заявки ознакомьтесь с условиями обслуживания.</p>
          <CdsCheckbox v-model="agreed" label="Принимаю условия обслуживания" hide-details />
        </div>
      </template>

      <template #[`item.2`]>
        <p class="py-2 text-center">Здесь будет форма с реквизитами компании.</p>
      </template>

      <template #[`item.3`]>
        <p class="py-2 text-center">Заявка отправлена — подтверждение придёт на почту.</p>
      </template>

      <template #actions="{ prev, next }">
        <div class="flex items-center justify-between">
          <CdsButton variant="soft" color="brand" text="Назад" :disabled="step === 1" @click="prev" />
          <CdsButton text="Далее" :disabled="step === 3 || (step === 1 && !agreed)" @click="next" />
        </div>
      </template>
    </CdsSteps>
  </div>
</template>

Статус заявки

Шапка без items работает как трекер процесса: только шаги, без контента и кнопок. Пройденные этапы отмечены индикаторами, а описания подсказывают даты и сроки. Проп vertical укладывает историю в столбец.

Sandbox Storybook

<script setup lang="ts">
import { CdsSteps, CdsStepsItem } from '@central-design-system/components';
</script>

<template>
  <div class="flex justify-center">
    <CdsSteps :model-value="2" vertical>
      <CdsStepsItem title="Заявка отправлена" text="12 марта, 10:24" />
      <CdsStepsItem title="Документы проверены" text="13 марта, 16:02" />
      <CdsStepsItem title="Согласование" text="Обычно занимает до двух дней" />
      <CdsStepsItem title="Заключение договора" />
    </CdsSteps>
  </div>
</template>

API

CdsSteps

Пропсы

Имя	Тип	По умолчанию	Описание
disabled	boolean | null | undefined	null	Заблокированное состояние
hideActions	boolean | undefined	—	Скрыть кнопки навигации по шагам
interactive	boolean | undefined	—	Возможность перехода на шаг по клику
itemProps	SelectItemKey	'props'	Свойство объекта, содержащее пропсы для элемента, либо функция для их получения
items	any[] | undefined	[]	Массив элементов для отображения
itemText	SelectItemKey	'text'	Ключ описания шага в объекте элемента items
itemTitle	SelectItemKey	'title'	Свойство объекта, используемое как заголовок элемента, либо функция для его получения
itemValue	SelectItemKey	'value'	Свойство объекта, используемое как значение элемента, либо функция для его получения
mandatory	boolean | "force" | undefined	'force'	Обязательный выбор хотя бы одного элемента
max	number | undefined	—	Максимальное количество выбираемых элементов
modelValue	any	—	Значение выбранных элементов группы
multiple	boolean | undefined	—	Разрешить множественный выбор
nextText	string | undefined	'$cds.steps.next'	Текст кнопки перехода на следующий шаг
prevText	string | undefined	'$cds.steps.prev'	Текст кнопки перехода на предыдущий шаг
readonly	boolean | null | undefined	null	Только для чтения
required	boolean | "force" | undefined	'force'	Обязательный выбор хотя бы одного элемента
selectedClass	string | undefined	'cds-steps-item--current'	CSS класс для выбранного состояния
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
theme	string | undefined	—	Тема компонента
vertical	boolean | undefined	—	Вертикальное отображение

События

Имя	Тип	Описание
update:modelValue	[value: unknown]	Событие изменения v-model

Слоты

Имя	Тип	Описание
actions	CdsStepsSlot	Кастомные кнопки навигации
default	CdsStepsSlot	Контент шапки: кастомные CdsStepsItem (используется, если не задан items)
header-item	CdsStepsItemSlot	Кастомный рендер контента каждого шага в шапке
item	CdsStepsInternalItem	Контент шага в контентной части
next	CdsStepsActionsSlot	Кастомная кнопка перехода на следующий шаг
prev	CdsStepsActionsSlot	Кастомная кнопка перехода на предыдущий шаг
text	CdsStepsItemSlot	Кастомное описание каждого шага
title	CdsStepsItemSlot	Кастомный заголовок каждого шага

Exposed

Имя	Тип	Описание
next	() => void	Переходит к следующему шагу.
prev	() => void	Переходит к предыдущему шагу.

CdsStepsActions

Пропсы

Имя	Тип	По умолчанию	Описание
disabled	boolean | "next" | "prev" | undefined	false	Блокировка кнопок навигации: обеих или конкретной
nextText	string | undefined	'$cds.steps.next'	Текст кнопки перехода на следующий шаг
prevText	string | undefined	'$cds.steps.prev'	Текст кнопки перехода на предыдущий шаг

События

Имя	Тип	Описание
click:next	[]	Клик по кнопке перехода на следующий шаг
click:prev	[]	Клик по кнопке перехода на предыдущий шаг

Слоты

Имя	Тип	Описание
next	CdsStepsActionsSlot	Кастомная кнопка перехода на следующий шаг
prev	CdsStepsActionsSlot	Кастомная кнопка перехода на предыдущий шаг

CdsStepsItem

Пропсы

Имя	Тип	По умолчанию	Описание
disabled	boolean | null | undefined	null	Заблокированное состояние
error	boolean | undefined	—	Шаг завершен с ошибкой
interactive	boolean | undefined	—	Возможность перехода на шаг по клику
readonly	boolean | null | undefined	null	Только для чтения
selectedClass	string | undefined	—	CSS класс для выбранного состояния
text	string | undefined	—	Описание шага
title	string | undefined	—	Заголовок шага
value	any	—	Значение компонента в группе
warning	boolean | undefined	—	Шаг требует внимания

События

Имя	Тип	Описание
group:selected	[value: { value: boolean; }]	Событие изменения выбранного состояния шага в группе

Слоты

Имя	Тип	Описание
default	CdsStepsItemSlot	Дополнительный контент шага после заголовка и описания
text	CdsStepsItemSlot	Кастомное описание шага
title	CdsStepsItemSlot	Кастомный заголовок шага

CdsStepsView

Пропсы

Имя	Тип	По умолчанию	Описание
crossfade	boolean | undefined	—	Слайды сменяются плавным перекрестным затуханием вместо сдвига
direction	"horizontal" | "vertical" | undefined	'horizontal'	Переключение между горизонтальным или вертикальным отображением.
disabled	boolean | null | undefined	null	Заблокированное состояние
max	number | undefined	—	Максимальное количество выбираемых элементов
modelValue	any	—	Значение выбранных элементов группы
multiple	boolean | undefined	—	Разрешить множественный выбор
reverse	boolean | undefined	—	Инвертирует направление анимации перехода между слайдами
selectedClass	string | undefined	—	CSS класс для выбранного состояния
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
theme	string | undefined	—	Тема компонента
transitionDuration	number | undefined	—	Длительность анимации перехода между слайдами в миллисекундах
verticalArrows	boolean | "left" | "right" | undefined	—	Размещает стрелки навигации вертикально: 'left' или 'right' — сторона, true — сторона по умолчанию

События

Имя	Тип	Описание
update:modelValue	[value: any]	Событие изменения v-model

Слоты

Имя	Тип	Описание
additional	{ group: GroupProvide; }	Дополнительный контент поверх слайдов — например точки-индикаторы или собственная навигация
default	{ group: GroupProvide; }	Слайды. В параметрах — состояние группы для управления активным слайдом
next	{ props: ControlProps; }	Кнопка перехода к следующему слайду. В параметрах — готовые пропсы для своей кнопки
prev	{ props: ControlProps; }	Кнопка перехода к предыдущему слайду. В параметрах — готовые пропсы для своей кнопки

CdsStepsViewItem

Пропсы

Имя	Тип	По умолчанию	Описание
disabled	boolean | null | undefined	null	Заблокированное состояние
eager	boolean | undefined	—	Принудительно рендерит содержимое компонента при его использовании. Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.
reverseTransition	string | boolean | undefined	—	Переход при показе слайда в обратном направлении. Имя transition-компонента или false, чтобы отключить анимацию
selectedClass	string | undefined	—	CSS класс для выбранного состояния
transition	string | boolean | undefined	—	Переход при показе слайда в прямом направлении. Имя transition-компонента или false, чтобы отключить анимацию
value	any	—	Значение компонента в группе

Слоты

Имя	Тип	Описание
default	any	Контент слайда