Пошаговая навигация: показывает, где пользователь находится в многоэтапном процессе, и позволяет вернуться к пройденным этапам. Две ориентации, два размера, три типа индикатора и три семантики. Реализует клавиатурную навигацию стрелками с roving tabindex. Отдельным мастером идёт прогресс-степпер — он показывает продвижение полосой вместо цепочки шагов.
Ориентация
horizontal · vertical
Ориентация
Пример
Horizontal
Vertical
Vertical + слот
Прогресс-степпер
отдельный мастер · Height big
Второй мастер той же страницы макета. Показывает продвижение полосой, а не цепочкой шагов: подходит там, где этапов много или их состав заранее неизвестен. Полоса — компонент ProgressBar, а не своя разметка.
Height big
Пример
On
Подписание договораШаг 2 из 5
Далее: настройка рисков
Off
Подписание договораШаг 2 из 5
Далее: настройка рисков
Размеры
MD — точка 24, лейбл 16/24 · SM — точка 20, лейбл 14/20
Размер
Пример
MD
SM
Токен
MD
SM
Роль
--ds-stepper-*-point
24
20
Диаметр индикатора
--ds-stepper-*-icon
20
16
Глиф внутри индикатора
--ds-stepper-*-gap
8
6
Индикатор ↔ лейбл
--ds-stepper-*-step-gap
12
10
Шаг ↔ шаг
--ds-stepper-*-fs / -lh
16/24
14/20
Лейбл
--ds-stepper-caption-fs / -lh
12/16
12/16
Описание, одинаково в обоих
--ds-stepper-line-stroke
2
2
Соединительная линия
Положение лейбла
top · bottom · inline — только у горизонтали
Значение
Пример
top — лейбл справа от индикатора, линия под шагом
bottom — текст под индикатором и линией
inline — лейбл в одной строке, описание под ним
Типы индикатора
number · status · dot
Тип
Пример
number — порядковый номер этапа
status — иконку выбирает семантика
dot — нейтральный маркер без номера
Семантика
neutral · warning · negative — красятся только индикатор и линия
Значение
Пример
negative — ошибка блокирует продолжение
warning — требует внимания, но не блокирует
Состояния
default · hover · active · disabled · focus
Состояние
Индикатор
Лейбл и линия
Default
--ds-surface-neutral-medium
лейбл --ds-text-tertiary, линия --ds-stroke-mid
Hover
без изменений
лейбл --ds-text-primary, линия --ds-stroke-high
Active
--ds-neutral-fill, текст --ds-text-invert
лейбл --ds-text-neutral-ghost, описание --ds-text-secondary
Disabled
--ds-disabled-fill, глиф --ds-disabled-icon
оба --ds-disabled-text, линия --ds-nba-border-disabled
Focus
--ds-focus-ring на шаге
в макете состояния нет — взято системное кольцо ДС
3НедоступенДо выполнения условий
Анатомия
Figma · ↳ Stepper 2693:2027
Элемент
Класс
Назначение
1 · Step
.ds-stepper-point
Индикатор шага: номер, иконка статуса или точка. Дополняется соединительной линией
2 · Label
.ds-stepper-label
Название этапа. Одно–три слова
3 · Description
.ds-stepper-caption
Пояснение под лейблом. Опционально
4 · Swap slot
.ds-stepper-slot
Произвольный контент внутри шага. Только в вертикальной ориентации
—
.ds-stepper-line
Соединитель. У последнего шага отсутствует
Клавиатура
roving tabindex
TabФокус входит в компонент. В информационном режиме шаги фокус не принимают
←↑Предыдущий шаг
→↓Следующий шаг
EnterПереход к шагу в фокусе
HomeПервый шаг
EndПоследний доступный шаг
Правила
когда применять и когда не стоит
Семантику несёт индикатор
Ошибка и предупреждение красят только точку и линию. Лейбл с описанием остаются обычного цвета — тот же инвариант, что у Radio, Checkbox и Switch.
Не для независимых разделов
Если «Портфель», «Аналитика» и «Новости» не связаны единым процессом — это разделы, а не шаги. Здесь нужны Tabs.
Возврат назад не блокировать
В финансах пользователь ожидает контроль над своими действиями. Запрет возврата допустим только когда операция завершена и технически необратима.
Больше семи шагов — вертикаль
Длинные названия в горизонтальной полосе разрывают линию между шагами. Для длинных процессов используйте вертикальную ориентацию.
Статусные термины дословно
«Принята», «На исполнении», «Исполнена» имеют юридическое значение. Перефразировать нельзя — только утверждённый словарь.
Информационный режим — без навигации
Если переключение шагов управляется системой, ставьте interactive={false}: шаги перестают быть кнопками и не попадают в таб-порядок.