Steps

Preview Available in release assets

Present an ordered sequence while preserving list order, headings, and authored current-step state.

Steps in context

<section aria-labelledby="setup-heading">
  <h2 id="setup-heading">Set up local delivery</h2>
  <ol class="thin-steps">
    <li>
      <div>
        <h3>Choose an address</h3>
        <p>Add the place where the order should arrive.</p>
      </div>
    </li>
    <li aria-current="step">
      <div>
        <h3>Select a delivery window with a deliberately long label</h3>
        <p>Times use the destination's local timezone.</p>
      </div>
    </li>
    <li>
      <div>
        <h3>Review and place order</h3>
        <p>Confirm the total before submitting.</p>
      </div>
    </li>
  </ol>
</section>

Show code

<section aria-labelledby="setup-heading">
  <h2 id="setup-heading">Set up local delivery</h2>
  <ol class="thin-steps">
    <li>
      <div>
        <h3>Choose an address</h3>
        <p>Add the place where the order should arrive.</p>
      </div>
    </li>
    <li aria-current="step">
      <div>
        <h3>Select a delivery window with a deliberately long label</h3>
        <p>Times use the destination's local timezone.</p>
      </div>
    </li>
    <li>
      <div>
        <h3>Review and place order</h3>
        <p>Confirm the total before submitting.</p>
      </div>
    </li>
  </ol>
</section>

Anatomy

Labelled section
Ordered list
List item
Generated visual number
Step heading
Optional supporting content

Variants and sizes

Instruction sequence
Current step with aria-current=step
Compact content

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Default
Current step
Completed state via authored data-state=complete
Long and localized labels
Right-to-left content
Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Steps is presentational and owns no navigation or state transition. Links, buttons, and forms inside a step retain their native behavior.

Accessibility

Use an ol whenever order matters, keep visible headings in every substantial step, and author aria-current=step on at most one item. Visual connectors and numbers do not replace list semantics or status text.

Contract

COMPOSE

Basis

Native headings, lists, time, and table/content relationships; no APG widget

Evidence

tests/unit/library/content-patterns.test.ts

API

Use ol.thin-steps with direct li children. Put the step content in a child wrapper. Optional aria-current=step and data-state=complete express authored state.

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The ordered list, headings, content, and authored current state remain meaningful without CSS or JavaScript.

Assets and dependencies

/components.css

Dependencies: None

Source: packages/ui/src/items/steps/style.ts