Stepper visar var användaren befinner sig i ett numrerat flöde. Den visar även vad som är klart, om något saknas och vilka steg som är kvar att göra för att slutföra flödet.
Innehållsförteckning
| Innehållsförteckning |
|---|
Komponentkällor
| Info |
|---|
Denna komponent finns inte i kod (IDS) ännu. |
Designspecifikation
Status på steg
Stepper-komponenten har ett antal states och statusar att välja mellan för att indikera hur användaren har eller kan interagera med komponenten.
Default: användaren befinner sig inte på detta steg.
ActiveSelected: det aktuella steget användaren befinner sig på.
Valid: informationen i steget (exempelvis en input) är godkänd.
Invalid: informationen i steget godkänns inte (exempelvis valideringsfel i input).
Disabled: användaren kan inte interagera med steget, det är inaktivt.
.png?version=1&modificationDate=1675686317949&cacheVersion=1&api=v2)
.png?version=1&modificationDate=1675687856556&cacheVersion=1&api=v2)
Expanderbara steg
I komponenten finns möjlighet att välja om stegen ska vara expanderbara eller inte. I design visas det med en chevron till höger.
I flöden där användaren ska kunna växla mellan olika steg i processen själv passar expanderbara steg bra. Om användaren däremot måste komplettera ett steg innan nästa blir tillgängligt bör du designa utan möjligheten att expandera, genom att sätta state på efterföljande steg till disabled.
.png?version=1&modificationDate=1675686251236&cacheVersion=1&api=v2&width=453)
.png?version=1&modificationDate=1675686251236&cacheVersion=1&api=v2&width=448)
Tillgänglighet
| Observera |
|---|
Tillgänglighetsinformation uppdateras inom kort. |
Feedback
Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.
Publicerad | |
|---|---|
Senast uppdaterad |