Stepper

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

Step 1

Step 2

Step 3

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

Step 1

Step 2

Step 3

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

Step 1

Step 2

Step 3

Step 4

Step 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

Step 1

Step 2

Step 3

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

Step 1

Step 2

Step 3

Step 4

Step 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

// npm package
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'`
`items`

Attributes

Name	Types	Description
`layout`	`'horizontal' \| '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