Stepper
Multi-step form header featuring progress navigation and a back action. The Stepper component visually communicates a user’s position within a linear, multi-step process. It helps users understand how many steps remain, which step is currently active, and which steps have already been completed.
This component is designed to remain sticky at the top of the viewport as users progress through a flow, providing constant orientation. It adapts across mobile, tablet, and desktop breakpoints.
When to use it (and when not to)
Section titled “When to use it (and when not to)”Use the Stepper when:
- A process is too complex for a single view — for instance, when it requires more than 5–6 fields that should be logically grouped.
- High-value transactions such as checkouts, insurance applications, or legal forms where the user needs constant reassurance of their progress and should focus entirely on finishing the task.
- Linear journeys where the sequence of information matters and the user must be guided through a specific path.
Avoid using the Stepper when:
- The task can be completed in a single page view.
- The process is non-linear and the user needs to jump back and forth between sections in any order — a sequential form header would be misleading.
- The flow has fewer than 2 steps.
- The component would be used in overlays or modals where space is limited, making the UI feel too packed.
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”- Ensure the Back Button is the first focusable element when moving to step 2.
- Reinforce step indicators with a label for screen readers: “Step 1: description of the step”.
- If a user navigates back, previously entered data must be persisted. Never clear a form field during a “Back” action.
- Maintain a minimum 4.5:1 contrast ratio for step indicators and ensure text remains legible at 200% zoom.
- The header must remain sticky at the top of the viewport to provide constant orientation — use its “scroll version” when scrolled.
Properties
Section titled “Properties”State : Rested by Device
Section titled “State : Rested by Device”Mobile
Stepper
Background color:
color-background-neutral-default#ffffffcolor-background-neutral-default#ffffff Width: 375
Title
Height: 26
Text style:
Title/Desktop/8-default
.item/Step
Label: false
Tablet
Stepper
Background color:
color-background-neutral-default#ffffffcolor-background-neutral-default#ffffff Width: 768
Title
Height: 26
Text style:
Title/Desktop/8-default
.item/Step
Label: true
Desktop
Stepper
Background color:
color-surface-neutral-default#ffffffcolor-surface-neutral-default#ffffff Width: 1432
Title
Height: 48
Text style:
Title/Desktop/7-default
.item/Step
Label: true
State : Scroll by Device
Section titled “State : Scroll by Device”Mobile
Stepper
Drop shadow: Elevation/M
Background color:
color-background-neutral-default#ffffffcolor-background-neutral-default#ffffff Width: 375
Stepper
Width: 352
.item/Step
Label: false
Tablet
Stepper
Drop shadow: Elevation/M
Background color:
color-background-neutral-default#ffffffcolor-background-neutral-default#ffffff Width: 768
.item/Step
Label: true
Desktop
Stepper
Drop shadow: Elevation/M
Background color:
color-surface-neutral-default#ffffffcolor-surface-neutral-default#ffffff Width: 1432
.item/Step
Label: true
Has back button
Section titled “Has back button”Button-Main
Property type: Boolean
Default: true
Associated layers: Button-Main
Anatomy
Section titled “Anatomy”1. Button-Main
Depends on: Button-Main
Icon: <Instance name>
Has icon left: true
Has border: false
Has icon right: false
Type: Tertiary
Size: LG
State: Rested
Contrast: False
2. Title
Text align: Center
3. Stepper
4. .item/Step (Current)
Depends on: .item/Step
Label: true
State: Current
Hover: Yes
5. .item/Step lines
Depends on: .item/Step lines
State: Rested
6. .item/Step (Rested)
Depends on: .item/Step
State: Rested
Hover: No
7. .item/Step lines
Depends on: .item/Step lines
State: Rested
8. .item/Step (Rested)
Depends on: .item/Step
State: Rested
Hover: No
9. .item/Step lines
Depends on: .item/Step lines
State: Rested
10. .item/Step (Rested)
Depends on: .item/Step
State: Rested
Hover: No
Toyota
Title
Font family:
typography-title-desktop-7-font-familyNobel
Lorem Ipsum
typography-title-desktop-7-font-familyToyota Type
Lorem Ipsum
Font weight:
typography-title-desktop-7-font-weight-default200
Lorem Ipsum
typography-title-desktop-7-font-weight-default500
Lorem Ipsum
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830Lexus
Title
Font family:
typography-title-desktop-7-font-familyNobel
Lorem Ipsum
typography-title-desktop-7-font-familyToyota Type
Lorem Ipsum
Font weight:
typography-title-desktop-7-font-weight-default200
Lorem Ipsum
typography-title-desktop-7-font-weight-default500
Lorem Ipsum
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
color-background-neutral-default | Background color | Stepper container (mobile / tablet) |
color-background-neutral-default | Background color | Stepper container (mobile / tablet) |
color-surface-neutral-default | Background color | Stepper container (desktop) |
color-surface-neutral-default | Background color | Stepper container (desktop) |
color-foreground-neutral-default | Text color | Title, Step indicator number, Step label |
color-foreground-neutral-default | Text color | Title, Step indicator number, Step label |
color-foreground-neutral-muted | Text color | Step label (rested / upcoming) |
color-foreground-neutral-muted | Text color | Step label (rested / upcoming) |
color-border-neutral-default | Border color | Step indicator (current) |
color-border-neutral-default | Border color | Step indicator (current) |
color-border-neutral-muted | Border color | Step indicator (rested) |
color-border-neutral-muted | Border color | Step indicator (rested) |
color-foreground-contrast-default | Icon color | Check icon (filled step) |
color-foreground-contrast-default | Icon color | Check icon (filled step) |
color-border-neutral-muted | Divider color | Step lines |
color-border-neutral-muted | Divider color | Step lines |
Text Styles
Section titled “Text Styles”| Name | Applied as | Applied to |
|---|---|---|
Lorem Ipsum typography-title-7 | Text style | Title |
Lorem Ipsum typography-title-7 | Text style | Title |
Accessibility
Section titled “Accessibility”For Design
Section titled “For Design”- All states (current, rested, filled) must maintain accessible contrast.
- Focus styles must remain visible and meet WCAG AA contrast requirements. Focus should be clearly distinguishable from hover.
- Colour tokens used should be semantic (e.g. foreground/neutral/default) rather than fixed values, ensuring the component adapts correctly to different themes or surfaces.
- Maintain a minimum 4.5:1 contrast ratio for step indicators and ensure text remains legible at 200% zoom.
For Dev
Section titled “For Dev”To ensure the Stepper meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:
- Interactive Target
- Group the circle and label as a single button or link. The user should only Tab once per step.
- Semantic Labeling
- Use
aria-labelledbyto associate the step number with the label text, or use a singlearia-labelon the container.
- Use
- State Indicator
- Use
aria-current="step"on the active step so screen reader users know exactly which part of the process they are in (e.g. “Step 1 out of 4: [Label]”).
- Use
- Back Button Assistance
- If a user navigates back, previously entered data must be persisted. Never clear a form field during a “Back” action.
- Focus Flow
- The user focuses on the “Step” and the next press of Tab moves focus directly into the first interactive element of that step’s content.
- When a step is active, the next focus stop in the tab sequence must be the content area associated with that step.
- Make sure the Back Button is the first focusable element when moving to step 2.
- Navigate forward with Tab and backwards with Shift+Tab.
Guidance on how to use a component.
- Use it when a process requires more than 5–6 fields that should be logically grouped.
- Use it for high-value transactions such as checkouts, insurance applications, or legal forms where the user needs constant reassurance of their progress.
- Use it for linear journeys where the sequence of information matters and the user must be guided through a specific path.
Guidance on what to avoid when using a component.
- Don’t use it for single-page tasks where the user can complete the entire action in one view.
- Don’t use it for non-linear processes where the user needs to jump back and forth between sections in any order — a sequential form header would be misleading.
- Don’t use it for short flows with fewer than 2 steps.
- Don’t use it in overlays and modals where space is limited — it can make the UI feel too packed.
Responsive Behaviour
Section titled “Responsive Behaviour”Guidance on where this component has been used
- On mobile breakpoints, only the label for the current step is displayed to keep labels readable for longer words. Labels for other steps are hidden.
- On tablet and desktop breakpoints, all step labels are visible.