Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Interface elements
Components
Stepper
Stepper
Stepper buttons, or stepper, show progress through a sequence of logical, numbered steps. Steppers can display a transient feedback message after a step is saved.
Uses
How to use
Steppers show progress through a sequence by breaking it down into multiple logical, numbered steps.
How not to use
Avoid their 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.
Do not use a stepper if the process is so complex that it cannot be explained clearly and concisely in each step.
Behaviour
Type
Horizontal
States
Default
Current
Error
Success
Responsive
Mobile
Accessibility
This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.
Stepper se encapsulan en una lista ordenada ol.
Stepper has role="region".
Stepper uses the aria-current state in the current step to represent which step the user is in.
It also has the aria-selected attribute to identify the current "selected" state of the steps.
The steps have the property tabindex="0" in order to access them.
The status icons have an aria-label.
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
