Step Navigation

Step Navigation guides users through a workflow.

Step Navigation

Active Step Inactive Step Completed Step Completed & Active Step Disabled Step 
<tk-step-navigation>
  <tk-step-item active>Active Step</tk-step-item>
  <tk-step-item>Inactive Step</tk-step-item>
  <tk-step-item complete>Completed Step</tk-step-item>
  <tk-step-item complete active>Completed & Active Step</tk-step-item>
  <tk-step-item disabled>Disabled Step</tk-step-item>
</tk-step-navigation>

Description

Step Navigation is used where you want to break up a workflow and guide the user through a process in order.

Checkmark mode

Step ONE Step 2 Step 3 
<tk-step-navigation checkmark>
  <tk-step-item complete>Step ONE</tk-step-item>
  <tk-step-item>Step 2</tk-step-item>
  <tk-step-item disabled>Step 3</tk-step-item>
</tk-step-navigation>
Step ONE Step 2 Step 3 
<tk-step-navigation>
  <tk-step-item checkmark complete>Step ONE</tk-step-item>
  <tk-step-item>Step 2</tk-step-item>
  <tk-step-item disabled>Step 3</tk-step-item>
</tk-step-navigation>

Description

Checkmarks can also be set at the individual step level by adding the checkmark attribute to tk-step-item instead of tk-step-navigation.

Presentation-only Mode (readonly)

Active Step Inactive Step Completed Step Completed & Active Step 
<tk-step-navigation>
  <tk-step-item readonly active>Active Step</tk-step-item>
  <tk-step-item readonly>Inactive Step</tk-step-item>
  <tk-step-item readonly complete>Completed Step</tk-step-item>
  <tk-step-item readonly complete active>Completed & Active Step</tk-step-item>
</tk-step-navigation>

Description

Using the readonly attribute can be used to inform a user of their step in a given flow without being able to navigate between them. This differs slightly from using disabled as it does not provide interactivity via alternative cursors or hover-based styling.

Usage

Do

  • Use readonly when you want to describe a flow without allowing navigation between steps

Don't

  • Use disabled in combination with readonly, or when the user can’t take actionable steps to progress without providing them additional information

Props

Property Default Description
active false Sets the active state of the step. Will default to first item if no steps are set.
checkmark false The stepper will display a checkmark in place of the step number.
complete false Mark the step as completed.
disabled false Disables the step.
readonly false Displays the step as a presentation-only mode by removing text decorations, hover states, and disabling navigation between steps.