Stepper components guide users through a multi-step process, breaking it down into manageable parts. This increases understanding, reduces cognitive load, and enhances the overall user experience.
Example
Guides users through multi-step processes with progress indication.
code
<script type="module">
import '@blueprintui/components/include/stepper.js';
</script>
<bp-stepper aria-label="stepper">
<bp-stepper-item selected><a href="#">Step 1</a></bp-stepper-item>
<bp-stepper-item>Step 2</bp-stepper-item>
<bp-stepper-item>Step 3</bp-stepper-item>
</bp-stepper>
Vertical
Demonstrates stepper in vertical orientation.
code
<bp-stepper aria-label="stepper" layout="vertical">
<bp-stepper-item selected><a href="#">Step 1</a></bp-stepper-item>
<bp-stepper-item>Step 2</bp-stepper-item>
<bp-stepper-item>Step 3</bp-stepper-item>
</bp-stepper>
Status
Shows stepper steps with various status states.
Step 1Step 2Step 3Step 4Step 5 code
<bp-stepper aria-label="stepper">
<bp-stepper-item>
<a href="#">Step 1</a>
</bp-stepper-item>
<bp-stepper-item selected> Step 2 </bp-stepper-item>
<bp-stepper-item status="success"> Step 3 </bp-stepper-item>
<bp-stepper-item status="warning"> Step 4 </bp-stepper-item>
<bp-stepper-item status="danger"> Step 5 </bp-stepper-item>
</bp-stepper>
Disabled
Shows stepper steps in disabled state.
code
<bp-stepper aria-label="stepper">
<bp-stepper-item disabled selected><a href="#">Step 1</a></bp-stepper-item>
<bp-stepper-item disabled>Step 2</bp-stepper-item>
<bp-stepper-item>Step 3</bp-stepper-item>
</bp-stepper>
Status Vertical
Demonstrates vertical stepper with status indicators.
Step 1Step 2Step 3Step 4Step 5 code
<bp-stepper aria-label="stepper" layout="vertical">
<bp-stepper-item>
<a href="#">Step 1</a>
</bp-stepper-item>
<bp-stepper-item selected> Step 2 </bp-stepper-item>
<bp-stepper-item status="success"> Step 3 </bp-stepper-item>
<bp-stepper-item status="warning"> Step 4 </bp-stepper-item>
<bp-stepper-item status="danger"> Step 5 </bp-stepper-item>
</bp-stepper>
Install
NPM
import '@blueprintui/components/include/stepper.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/stepper.js/+esm';
</script>
Accessibility
- The stepper component should have a clear multi step process for the user to follow.
- The active step label should clearly represent the content it opens.
bp-stepper
Properties
| Name | Types | Description |
|---|
layout | 'horizontal' | 'vertical' | Controls the layout direction of the stepper, either horizontal or vertical |
items | | |
Attributes
| Name | Types | Description |
|---|
layout | 'horizontal' | 'vertical' | Controls the layout direction of the stepper, either horizontal or vertical |
CSS Properties
| Name | Types | Description |
|---|
--font-size | | |
--font-weight | | |
--color | | |
--gap | | |
Slots
| Name | Types | Description |
|---|
default | | stepper items |
bp-stepper-item
Properties
| Name | Types | Description |
|---|
status | 'accent' | 'success' | 'warning' | 'danger' | determine the visual status state |
selected | boolean | selected visual state |
disabled | boolean | determines if element is mutable or focusable |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
Attributes
| Name | Types | Description |
|---|
status | 'accent' | 'success' | 'warning' | 'danger' | determine the visual status state |
selected | boolean | selected visual state |
disabled | boolean | determines if element is mutable or focusable |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
CSS Properties
| Name | Types | Description |
|---|
--background | | |
--color | | |
--cursor | | |
--border-width | | |
--padding | | |
--status-color | | |
Slots
| Name | Types | Description |
|---|
default | | item content |