All components (204)

Current step

Navigation · CurrentStep

What it is and when to use it

"Step 2 of 4" and the name of the step: the short version of Steps for narrow screens, where four columns of text do not fit.

When to use it

On mobile, above a multi-phase form or checkout, instead of the row of steps.
Next to Steps, with the same steps, when the row of steps is hidden on small screens. current is the index of the step in progress (the first is 0) and size the font size.

When not to

If the steps fit: Steps also shows what is done and what is missing.
For a complete step-by-step form: Wizard, which already counts it and announces it.

Keyboard: it has none; it is only text.

Accessibility: it goes in a role="status", so when advancing the new step is announced without moving focus. A current out of range is clamped to the first or the last step instead of saying "Step 7 of 4", and with no steps it draws nothing instead of "Step 0 of 0". Numbers are written according to the language.

Context: it goes inside LocaleProvider (or AmsetProvider), which decides how numbers are written.

Fine-tuning: no variables of its own: adjust it with the classes amset-steps__summary, amset-steps__summary-number and amset-steps__summary-title.

What it looks like

Step 2 of 4Shipping

<CurrentStep
  steps={[
    { key: 'carrito', title: 'Cart' },
    { key: 'envio', title: 'Shipping' },
    { key: 'pago', title: 'Payment' },
    { key: 'confirmacion', title: 'Confirmation' },
  ]}
  current={paso}
/>

Props

Import it with import { CurrentStep } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`current`required	`number`	—
`steps`required	`readonly Step[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`size`	`"sm" \| "md" \| "lg"`	The font size of the summary.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: