lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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 1Step 2Step 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 1Step 2Step 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 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

Step 1Step 2Step 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 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

// 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

NameTypesDescription
layout'horizontal' | 'vertical'
items

Attributes

NameTypesDescription
layout'horizontal' | 'vertical'

CSS Properties

NameTypesDescription
--font-size
--font-weight
--color
--gap

Slots

NameTypesDescription
defaultstepper items

bp-stepper-item

Properties

NameTypesDescription
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state
selectedbooleanselected visual state
disabledbooleandetermines if element is mutable or focusable
readonlybooleanmakes the element not mutable, meaning the user can not interact with button

Attributes

NameTypesDescription
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state
selectedbooleanselected visual state
disabledbooleandetermines if element is mutable or focusable
readonlybooleanmakes the element not mutable, meaning the user can not interact with button

CSS Properties

NameTypesDescription
--background
--color
--cursor
--border-width
--padding
--status-color

Slots

NameTypesDescription
defaultitem content