Skip to content
Feedback

Steps

Ordered step list for sequential flows.

React source Astro source Core source

Steps

Numbered ordered list for sequential flows. Children should be <li> elements — there is no active-step prop; mark the current step with aria-current="step" on the list item.

Examples

Default

Three setup steps.

  1. Install package
  2. Import styles
  3. Render components
Demo.tsxtsx
import { Steps } from '@var-ui/react';

<Steps>
  <li>Install package</li>
  <li>Import styles</li>
  <li>Render components</li>
</Steps>

Active step

Highlight the current step with aria-current="step" on the active <li>.

  1. Choose a plan
  2. Enter billing details
  3. Confirm purchase
Demo.tsxtsx
import { Steps } from '@var-ui/react';

<Steps>
  <li>Choose a plan</li>
  <li aria-current="step">Enter billing details</li>
  <li>Confirm purchase</li>
</Steps>

Props

Accessibility

Renders an <ol>. Use aria-current="step" on the active list item so assistive tech can announce progress. Keep step labels concise and sequential.