# Steppers The steps of a task that takes more than one screen: a booking, an import, the first run of a site. A list of steps in order, the one the person is on marked by the attribute a screen reader says, the ones before it done by their place. ## Examples `stepper` on an `

`, `stepper-item` on each step, and `aria-current="step"` on the step the person is on. Every step before it reads as done, every step after it as still to come; the numbers are counted by the list. ```html
1. Choose a tour
2. Pick a date
3. Guests
4. Payment
``` ### Across `stepper-horizontal` sets the steps in a row, each under its number. With a prefix, `md:stepper-horizontal`, the row starts where the region is wide enough, and the steps stay a column below it. ```html
1. Upload the file
2. Match the columns
3. Check the rows
4. Import
``` ### Steps to go back to A step done may lead back to its screen: its words are a link inside the `stepper-item`. A step still to come is plain text, as it cannot be reached yet. ```html
1. Name
2. Languages
3. Theme
4. Publish
``` ## States ## Keyboard and accessibility - The list is an `
` with a name of its own (`aria-label`): a screen reader says how many steps there are and which one this is. - The step the person is on is `aria-current="step"`, never a class: VoiceOver and NVDA say "current step", and the look follows the attribute. - The stepper shows where the person is; it moves nothing by itself. The screen's own buttons, "Back" and "Next", move between steps. - A step done that leads back is a link, reached by `Tab`; a step still to come is text, never a disabled link. ## Tokens From [`css/components/stepper.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/stepper.css). It declares `--redz-stepper-size`, `--redz-stepper-gap` on its root, never on rows or items. It reads the theme's `--redz-space-12`, `--redz-space-8`, `--redz-text-muted`, `--redz-border-strong`, `--redz-bg`, `--redz-fs-12`, `--redz-border`, `--redz-primary`, `--redz-primary-contrast`, `--redz-text`.