Government of Spain Dintel, Sistema de Diseño Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support
Components Steps

Steps

The “step by step” or stepper buttons show the progress through a sequence of logical and numbered steps. Steppers can display a transient feedback message after saving a step.

Preview

Figma
Preview steps

Uses

When to use

Steppers show progress through a sequence by dividing it into multiple logical and numbered steps.

When not to use

Avoid its use if the process is not naturally divided into steps or if the process is so simple that it does not need to be divided into steps. Avoid its use if the process is not naturally divided into steps or if the process is so simple that it does not need to be divided into steps.

Behaviour

Type

Visualization of the behavior of the horizontal type steps component
Horizontal

States

Displaying the behavior of the component steps by default
Default
Visualization of the behavior of the current type steps component
Current
Visualization of the behavior of the error type steps component
Error
Visualization of the behavior of the steps type success component
Success

Responsive

Visualization of the behavior of the steps component in mobile size screens
Mobile

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

Stepper are encapsulated in an ordered list ol. Stepper has role="region". Stepper has the aria-current status in the current step to represent which of them the user is in. It also has the aria-selected attribute to match the current "selected" state of lso steps. The steps have the tabindex=”0” property to access them. The status icons feature an aria-label.
Funded by the European Union NextGenerationEU, opens in new tab Recovery Plan, Transformation and Resilience, opens in new tab Digital Spain, opens in new tab Support Accessibility Web Map Cookies Policy

This website uses its own and third-party cookies to offer a better service. If you continue browsing, we consider that you accept its use.