No Results Found
Step Navigation guides users through a workflow.
<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>
Step Navigation is used where you want to break up a workflow and guide the user through a process in order.
<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>
<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>
Checkmarks can also be set at the individual step level by adding the checkmark attribute to tk-step-item
instead of tk-step-navigation
.
<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>
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.
readonly
when you want to describe a flow without allowing navigation between stepsdisabled
in combination with readonly
, or when the user can’t take actionable steps to progress without providing them additional informationProperty | 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. |