Steps — Teasim

A horizontal or vertical sequence of labelled steps. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

step-group, step-group--vertical, step, step-row, step-title, step-content, step-marker, step-connector

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

html

<ol class="step-group" aria-label="Setup progress" tabindex="0">
  <li class="step">
    <div class="step-row">
      <span class="step-connector" aria-hidden="true"></span>
      <span class="step-marker">1</span>
      <div class="step-content"><strong class="step-title">Install</strong></div>
    </div>
  </li>
  <li class="step" aria-current="step">
    <div class="step-row">
      <span class="step-connector" aria-hidden="true"></span>
      <span class="step-marker">2</span>
      <div class="step-content"><strong class="step-title">Configure</strong></div>
    </div>
  </li>
</ol>

Variants and composition

step-group is horizontal; step-group–vertical stacks steps. step-row owns marker, connector, title, and content inside each step.

Keep the required parts direct: step-group > step > step-row > step-marker / step-connector / step-content. step-title may be composed inside the content. Direction conditions such as step-group--vertical@md reach those direct parts without changing nested step groups. Ordinary utilities can override their default geometry.

Behavior and accessibility

Use an ordered list for a process and expose the current step in text or aria-current=step. Styling does not advance steps or manage form state.

Reference

See the interactive Storybook specimen. Continue to Swap or return to the Official preset overview.