Design
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#fbfbfccolor-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#fbfbfccolor-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 |
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.