Skip to content

Steps

The Steps component allows you to create a wizard or easily break your process steps into multiple steps. Breaking things down into multiple steps can improve the user experience by keeping them small and accessible compared to listing them all at once.

Examples

Base

Variants

Different styles can be achieved with the variant prop. The variant prop can be set on the Steps as well as on the StepItem component.

Sizes

The component can be displayed in different sizes using the size prop.

Customise

Vertical

Adding the vertical prop displays the component vertically instead of horizontally.

Steps Component

Responsive horizontal process steps.

html
<o-steps></o-steps>

Props

Prop nameDescriptionTypeValuesDefault
activateOnFocusSet the step active on navigation focusboolean-false
animateInitiallyApply animation on the initial renderboolean-
From config:
steps: {
  animateInitially: false
}
animatedStep navigation is animatedboolean-
From config:
steps: {
  animated: true
}
animationTransition animation name[string, string, string, string] | [string, string][next, prev], [right, left, down, up]
From config:
steps: {
  animation: [ "slide-next", "slide-prev", "slide-down", "slide-up",]
}
ariaLabelAccessibility aria-label to be passed to the tablist wrapper elementstring-
From config:
steps: {
  ariaLabel: undefined
}
ariaNextLabelAccessibility next button aria labelstring-
From config:
steps: {
  ariaNextLabel: "Next"
}
ariaPreviousLabelAccessibility previous button aria labelstring-
From config:
steps: {
  ariaPreviousLabel: "Previous"
}
hasNavigationShow next and previous buttons below the componentboolean-true
iconNextIcon to use for navigation buttonstring-
From config:
steps: {
  iconNext: "chevron-right"
}
iconPackIcon pack to use for the navigationstringmdi, fa, fas and any other custom icon pack
From config:
steps: {
  iconPack: undefined
}
iconPrevIcon to use for navigation buttonstring-
From config:
steps: {
  iconPrev: "chevron-left"
}
labelPositionPosition of the marker label"bottom" | "left" | "right"bottom, right, left
From config:
steps: {
  labelPosition: "bottom"
}
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
steps: {
  mobileBreakpoint: undefined
}
v-modelThe selected item value, use v-model to make it two-way bindingstring|number|object-
optionsSteps options, unnecessary when default slot is usedOptionsProp<unknown>-
overrideOverride existing theme classes completelyboolean-
positionPosition of the step"centered" | "left" | "right"left, centered, right
roundedRounded step markersboolean-true
sizeStep sizestringsmall, medium, large
From config:
steps: {
  size: undefined
}
variantColor variant of the controlstringprimary, info, success, warning, danger, and any other custom color
From config:
steps: {
  variant: undefined
}
verticalShow step in vertical layoutboolean-false

Events

Event namePropertiesDescription
update:model-valuevalue unknown - updated modelValue propmodelValue prop two-way binding
changevalue unknown - new step value
value unknown - old step value
on step change event

Slots

NameDescriptionBindings
defaultPlace step items here
navigationOverride step navigationprevious {disabled: boolean, action: (): void } - previous button configs
next {disabled: boolean, action: (): void } - next button configs

StepItem Component

An step item used by the steps component.

html
<o-step-item></o-step-item>

Props

Prop nameDescriptionTypeValuesDefault
clickableItem can be used directly to navigate.
By default, previous steps are clickable while the others are not.
boolean-
componentComponent to be injectedComponent-
contentText content, unnecessary when default slot is usedstring-
disabledItem will be disabledboolean-false
eventsEvents to be binded to the injected component{}-
iconStep marker iconstring-
From config:
steps: {
  icon: undefined
}
iconPackIcon packstring-
From config:
steps: {
  iconPack: undefined
}
labelItem labelstring-
overrideOverride existing theme classes completelyboolean-
propsProps to be binded to the injected componentany-
stepStep marker content (when there is no icon)Numberish-
valueItem value (it will be used as the v-model of the wrapper component) - default is an uuidstring|number|object-
variantColor variant of the control.
This will override parent variant.
Could be used to set a completed step to "success" for example.
stringprimary, info, success, warning, danger, and any other custom color
visibleShow/hide itemboolean-true

Events

Event namePropertiesDescription
activateon step item activate event
deactivateon step item deactivate event

Slots

NameDescriptionBindings
defaultStep item contentactive boolean - if item is shown

Class Inspector

Classes applied to the element:
Want to know how does the Class Inspector work?
Class propDescriptionPropsSuffixes
rootClassClass of the root element.
mobileClassClass of the root element when on mobile.
👉 Switch to mobile view to see it in action!
sizeClassSize of the root element with size.sizesmall
medium
large
positionClassClass of the root element when is vertical and has position.position
vertical
left
right
centered
verticalClassClass of the root element when is vertical.vertical
listClassClass of the list container element.
animatedClassClass of the list container when animated.animated
dividerClassClass of the item divider element.
markerClassClass of the item marker element.
markerRoundedClassClass of the item marker element when rounded.rounded
contentClassClass of the panel container element.
transitioningClassClass of the panel container element when transitioning.
👉 Click on a marker to see it in action!
navigationClassClass of the navigation element.
stepClassClass of the step item element.
stepVariantClassClass of the step item element with variant (default value by parent steps component).variantprimary
info
warning
danger
stepPositionClassClass of the step item element when positioned.labelPositionbottom
right
left
stepClickableClassClass of the step item element when clickable.clickable
stepActiveClassClass of the step item element when active.
stepDisabledClassClass of the step item element when disabled.disabled
stepPreviousClassClass of the step item element before the active one.
stepNextClassClass of the step item element after the active one.
stepLabelClassClass of the step item label element.
stepIconClassClass of the step item icon element.
stepPanelClassClass of the step panel element.

Sass Variables

Current theme ➜ Oruga

SASS VariableDefault
$steps-title-background-colorhsl(0, 0%, 100%)
$steps-title-padding0.2em
$steps-title-font-weight500
$steps-marker-backgroundvar(--#{$prefix}grey-light)
$steps-marker-colorvar(--#{$prefix}primary-invert)
$steps-marker-border0.2em solid #fff
$steps-marker-font-weight700
$steps-marker-rounded-border-radiusvar( --#{$prefix}base-border-radius-rounded)
$steps-colorvar(--#{$prefix}grey-lighter)
$steps-previous-colorvar(--#{$prefix}primary)
$steps-active-colorvar(--#{$prefix}primary)
$steps-divider-height0.2em
$steps-vertical-padding1em 0
$steps-item-line-heightvar(--#{$prefix}base-line-height)
$steps-link-colorhsl(0, 0%, 29%)
$steps-content-spacer1rem
$steps-content-padding1rem
$steps-font-sizevar(--#{$prefix}base-font-size)

See ➜ 📄 SCSS file

Current theme ➜ Bulma

SASS VariableDefault
$steps-divider-height0.2em
$steps-vertical-padding1em 0
$steps-colorsdv.$colors
$steps-mobile-breakpointiv.$tablet
$steps-marker-backgroundcss.getVar("grey-light")
$steps-marker-colorcss.getVar("scheme-main")
$steps-marker-border0.2em solid css.getVar("white")
$steps-default-colorcss.getVar("grey-lighter")
$steps-previous-colorcss.getVar("scheme-main")
$steps-previous-backgroundcss.getVar("primary")
$steps-active-colorcss.getVar("primary")
$steps-active-backgroundcss.getVar("scheme-main")
$steps-details-background-colorcss.getVar("body-background-color")

See ➜ 📄 SCSS file

Current theme ➜ Bootstrap

SASS VariableDefault
$steps-marker-bgvar(--#{$prefix}gray-light)
$steps-marker-bordervar(--#{$prefix}white)
$steps-marker-colorvar(--#{$prefix}white)
$steps-color-activevar(--#{$prefix}primary)
$steps-title-colorvar(--#{$prefix}dark)
$steps-title-bgvar(--#{$prefix}white)
$steps-title-font-weight500
$steps-divider-height0.2em
$steps-content-spacer1rem
$steps-content-padding1rem
$steps-vertical-padding1em 0

See ➜ 📄 SCSS file

Released under the MIT License.