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

Show code

HTML

<section>
    <o-field grouped multiline>
        <o-field>
            <o-switch v-model="showSocial" label="Show Social step" />
        </o-field>
        <o-field>
            <o-switch v-model="isAnimated" label="Animated" />
        </o-field>
        <o-field>
            <o-switch v-model="isRounded" label="Rounded" />
        </o-field>
        <o-field>
            <o-switch v-model="isVertical" label="Vertical" />
        </o-field>
        <o-field>
            <o-switch v-model="isStepsClickable" label="Clickable Marker" />
        </o-field>
        <o-field>
            <o-switch v-model="hasNavigation" label="Navigation Buttons" />
        </o-field>
        <o-field>
            <o-switch
                v-model="customNavigation"
                label="Custom Navigation" />
        </o-field>
        <o-field>
            <o-switch v-model="isProfileWarning">
                Set <code>warning</code> for profile
            </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="enableProfileActivateEvent">
                Enable profile activate event
            </o-switch>
        </o-field>
    </o-field>

    <o-field v-if="hasNavigation" grouped>
        <o-field label="Label position">
            <o-select v-model="labelPosition">
                <option value="bottom">Bottom</option>
                <option value="right">Right</option>
                <option value="left">Left</option>
            </o-select>
        </o-field>
        <o-field label="Prev icon">
            <o-select v-model="prevIcon">
                <option value="chevron-left">Chevron</option>
                <option value="arrow-left">Arrow</option>
            </o-select>
        </o-field>
        <o-field label="Next icon">
            <o-select v-model="nextIcon">
                <option value="chevron-right">Chevron</option>
                <option value="arrow-right">Arrow</option>
            </o-select>
        </o-field>
    </o-field>

    <o-steps
        v-model="activeStep"
        :vertical="isVertical"
        :animated="isAnimated"
        :rounded="isRounded"
        :has-navigation="hasNavigation"
        :icon-prev="prevIcon"
        :icon-next="nextIcon"
        :label-position="labelPosition">
        <o-step-item
            value="1"
            step="1"
            label="Account"
            :clickable="isStepsClickable">
            <h1 class="title has-text-centered">Account</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item
            value="2"
            step="2"
            label="Profile"
            :clickable="isStepsClickable"
            :variant="isProfileWarning ? 'warning' : ''"
            @activate="onProfileActivate">
            <h1 class="title has-text-centered">Profile</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item
            value="3"
            step="3"
            :visible="showSocial"
            label="Social"
            :clickable="isStepsClickable">
            <h1 class="title has-text-centered">Social</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item
            value="4"
            :step="showSocial ? '4' : '3'"
            label="Finish"
            :clickable="isStepsClickable"
            disabled>
            <h1 class="title has-text-centered">Finish</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <template v-if="customNavigation" #navigation="{ previous, next }">
            <o-button
                outlined
                label="Previous"
                variant="danger"
                icon-pack="fas"
                icon-left="backward"
                :disabled="previous.disabled"
                @click.prevent="previous.action" />

            <o-button
                outlined
                label="Next"
                variant="success"
                icon-pack="fas"
                icon-right="forward"
                :disabled="next.disabled"
                @click.prevent="next.action" />
        </template>
    </o-steps>
</section>

JS

import { ref } from "vue";

// Is
const activeStep = ref("1");
const isStepsClickable = ref(false);
const isAnimated = ref(true);
const isVertical = ref(false);
const isProfileWarning = ref(false);
const isRounded = ref(true);
const enableProfileActivateEvent = ref(false);
// Navigation
const hasNavigation = ref(true);
const customNavigation = ref(false);
// Icon
const prevIcon = ref("chevron-left");
const nextIcon = ref("chevron-right");
// Misc
const showSocial = ref(false);
const labelPosition = ref<"bottom" | "left" | "right">("bottom");

function onProfileActivate(): void {
    if (enableProfileActivateEvent.value) alert("Profile Activated");
}

Variants

Different styles can be achieved with the variant prop.

Show code

HTML

<section>
    <o-field label="Success">
        <o-steps variant="success">
            <o-step-item label="Account" icon="user-lock" clickable />
            <o-step-item label="Profile" icon="user" clickable />
            <o-step-item label="Social" icon="user-plus" clickable />
        </o-steps>
    </o-field>

    <o-field label="Info">
        <o-steps variant="info">
            <o-step-item label="Account" icon="user-lock" clickable />
            <o-step-item label="Profile" icon="user" clickable />
            <o-step-item label="Social" icon="user-plus" clickable />
        </o-steps>
    </o-field>

    <o-field label="Warning">
        <o-steps variant="warning">
            <o-step-item label="Account" icon="user-lock" clickable />
            <o-step-item label="Profile" icon="user" clickable />
            <o-step-item label="Social" icon="user-plus" clickable />
        </o-steps>
    </o-field>

    <o-field label="Danger">
        <o-steps variant="danger">
            <o-step-item label="Account" icon="user-lock" clickable />
            <o-step-item label="Profile" icon="user" clickable />
            <o-step-item label="Social" icon="user-plus" clickable />
        </o-steps>
    </o-field>
</section>

Sizes

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

Show code

HTML

<section>
    <o-field label="Small">
        <o-steps size="small">
            <o-step-item label="Account" icon="user-lock" clickable />
            <o-step-item label="Profile" icon="user" clickable />
            <o-step-item label="Social" icon="user-plus" clickable />
        </o-steps>
    </o-field>

    <o-field label="Default">
        <o-steps>
            <o-step-item label="Account" icon="user-lock" clickable />
            <o-step-item label="Profile" icon="user" clickable />
            <o-step-item label="Social" icon="user-plus" clickable />
        </o-steps>
    </o-field>

    <o-field label="Medium">
        <o-steps size="medium">
            <o-step-item label="Account" icon="user-lock" clickable />
            <o-step-item label="Profile" icon="user" clickable />
            <o-step-item label="Social" icon="user-plus" clickable />
        </o-steps>
    </o-field>

    <o-field label="Large">
        <o-steps size="large">
            <o-step-item label="Account" icon="user-lock" clickable />
            <o-step-item label="Profile" icon="user" clickable />
            <o-step-item label="Social" icon="user-plus" clickable />
        </o-steps>
    </o-field>
</section>

Vertical

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

Show code

HTML

<section>
    <o-field grouped>
        <o-field label="Position">
            <o-select v-model="position" placeholder="Position">
                <option :value="undefined">Default</option>
                <option value="left">Left</option>
                <option value="centered">Centered</option>
                <option value="right">Right</option>
            </o-select>
        </o-field>
        <o-field label="Size">
            <o-select v-model="size" placeholder="Size">
                <option :value="undefined">Default</option>
                <option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
            </o-select>
        </o-field>
        <o-field label="Label position" label-position="on-border">
            <o-select v-model="labelPosition">
                <option value="bottom">Bottom</option>
                <option value="right">Right</option>
                <option value="left">Left</option>
            </o-select>
        </o-field>
    </o-field>

    <o-steps
        :position="position"
        :label-position="labelPosition"
        :size="size"
        vertical>
        <o-step-item label="Account" icon="user-lock">
            Account: Lorem ipsum dolor sit amet. <br />
            Account: Lorem ipsum dolor sit amet. <br />
            Account: Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item label="Profile" icon="user">
            Profile: Lorem ipsum dolor sit amet. <br />
            Profile: Lorem ipsum dolor sit amet.? <br />
            Profile: Lorem ipsum dolor sit amet. <br />
            Profile: Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item label="Social" icon="user-plus" disabled>
            Social: Lorem ipsum dolor sit amet. <br />
            Social: Lorem ipsum dolor sit amet. <br />
            Social: Lorem ipsum dolor sit amet. <br />
            Social: Lorem ipsum dolor sit amet. <br />
            Social: Lorem ipsum dolor sit amet.
        </o-step-item>
    </o-steps>
</section>

JS

import { ref } from "vue";

const labelPosition = ref<"bottom" | "right" | "left">("bottom");
const position = ref<"left" | "centered" | "right">("left");
const size = ref<string>();

Steps component

Responsive horizontal process steps.

<o-steps></o-steps>

Props

Prop name	Description	Type	Values	Default
activateOnFocus	Set the step active on navigation focus	boolean	-	false
animateInitially	Apply animation on the initial render	boolean	-	From config: steps: {   animateInitially: false }
animated	Step navigation is animated	boolean	-	From config: steps: {   animated: true }
animation	Transition 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",] }
ariaLabel	Accessibility aria-label to be passed to the tablist wrapper element	string	-	From config: steps: {   ariaLabel: undefined }
ariaNextLabel	Accessibility next button aria label	string	-	From config: steps: {   ariaNextLabel: "Next" }
ariaPreviousLabel	Accessibility previous button aria label	string	-	From config: steps: {   ariaPreviousLabel: "Previous" }
hasNavigation	Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items.	boolean	-	true
iconNext	Icon to use for navigation button	string	-	From config: steps: {   iconNext: "chevron-right" }
iconPack	Icon pack to use for the navigation	string	mdi, fa, fas and any other custom icon pack	From config: steps: {   iconPack: undefined }
iconPrev	Icon to use for navigation button	string	-	From config: steps: {   iconPrev: "chevron-left" }
labelPosition	Position of the marker label	"bottom" | "left" | "right"	bottom, right, left	From config: steps: {   labelPosition: "bottom" }
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: steps: {   mobileBreakpoint: undefined }
v-model	The selected item value, use v-model to make it two-way binding	string|number|object	-
options	Steps options, unnecessary when default slot is used	OptionsProp<unknown>	-
override	Override existing theme classes completely	boolean	-
position	Position of the step	"centered" | "left" | "right"	left, centered, right
rounded	Rounded step markers	boolean	-	true
size	Step size	string	small, medium, large	From config: steps: {   size: undefined }
variant	Color of the control	string	primary, info, success, warning, danger, and any other custom color	From config: steps: {   variant: undefined }
vertical	Show step in vertical layout	boolean	-	false

Events

Event name	Properties	Description
update:model-value	value T - updated modelValue prop	modelValue prop two-way binding
change	value T - new step value value T - old step value	on step change event

Slots

Name	Description	Bindings
default	Place step items here
navigation	Override step navigation	previous {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.

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

Props

Prop name	Description	Type	Values	Default
clickable	Item can be used directly to navigate. If undefined, previous steps are clickable while the others are not	boolean	-
component	Component to be injected.	Component	-
content	Text content, unnecessary when default slot is used	string	-
disabled	Item will be disabled	boolean	-	false
events	Events to be binded to the injected component	{}	-
icon	Icon on the left	string	-	From config: steps: {   icon: undefined }
iconPack	Icon pack	string	-	From config: steps: {   iconPack: undefined }
label	Item label	string	-
override	Override existing theme classes completely	boolean	-
props	Props to be binded to the injected component	any	-
step	Step marker content (when there is no icon)	number | string	-
value	Item value (it will be used as v-model of wrapper component) - default is an uuid	string|number|object	-
variant	Default style for the step. This will override parent type. Could be used to set a completed step to "success" for example	string	-
visible	Show/hide item	boolean	-	true

Events

Event name	Properties	Description
activate		on step item activate event
deactivate		on step item deactivate event

Slots

Name	Description	Bindings
default	Step item content	active boolean - if item is shown

Class Inspector

Classes applied to the element:

How does the Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
mobileClass	Class of the root element when on mobile. 👉 Switch to mobile view to see it in action!
sizeClass	Size of the root element with size.	size	small medium large
variantClass	Class of the root element with variant.	variant	primary info warning danger
positionClass	Class of the root element when is vertical and has position.	position vertical	left right centered
verticalClass	Class of the root element when is vertical.	vertical
listClass	Class of the list container element.
animatedClass	Class of the list container when animated.	animated
dividerClass	Class of the item divider element.
markerClass	Class of the item marker element.
markerRoundedClass	Class of the item marker element when rounded.	rounded
contentClass	Class of the panel container element.
transitioningClass	Class of the panel container element when transitioning. 👉 Click on a marker to see it in action!
navigationClass	Class of the navigation element.
▷ stepClass	Class of the step item element.
▷ stepActiveClass	Class of the step item element when active.
▷ stepVariantClass	Class of the step item element with variant (default value by parent steps component).	variant	primary info warning danger
▷ stepPositionClass	Class of the step item element when positioned.	labelPosition	bottom right left
▷ stepClickableClass	Class of the step item element when clickable.	clickable
▷ stepDisabledClass	Class of the step item element when disabled.	disabled
▷ stepPreviousClass	Class of the step item element before the active one.
▷ stepNextClass	Class of the step item element after the active one.
▷ stepLabelClass	Class of the step item label element.
▷ stepIconClass	Class of the step item icon element.
▷ stepPanelClass	Class of the step panel element.

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$steps-title-background-color	hsl(0, 0%, 100%)
$steps-title-padding	0.2em
$steps-title-font-weight	500
$steps-marker-background	var(--#{$prefix}grey-light)
$steps-marker-color	var(--#{$prefix}primary-invert)
$steps-marker-border	0.2em solid #fff
$steps-marker-font-weight	700
$steps-marker-rounded-border-radius	var( --#{$prefix}base-border-radius-rounded)
$steps-color	var(--#{$prefix}grey-lighter)
$steps-previous-color	var(--#{$prefix}primary)
$steps-active-color	var(--#{$prefix}primary)
$steps-divider-height	0.2em
$steps-vertical-padding	1em 0
$steps-item-line-height	var(--#{$prefix}base-line-height)
$steps-link-color	hsl(0, 0%, 29%)
$steps-content-spacer	1rem
$steps-content-padding	1rem
$steps-font-size	var(--#{$prefix}base-font-size)

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$steps-divider-height	0.2em
$steps-vertical-padding	1em 0
$steps-colors	dv.$colors
$steps-mobile-breakpoint	iv.$tablet
$steps-marker-background	css.getVar("grey-light")
$steps-marker-color	css.getVar("scheme-main")
$steps-marker-border	0.2em solid css.getVar("white")
$steps-default-color	css.getVar("grey-lighter")
$steps-previous-color	css.getVar("scheme-main")
$steps-previous-background	css.getVar("primary")
$steps-active-color	css.getVar("primary")
$steps-active-background	css.getVar("scheme-main")
$steps-details-background-color	css.getVar("body-background-color")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS Variable	Default
$steps-marker-bg	var(--#{$prefix}gray-light)
$steps-marker-border	var(--#{$prefix}white)
$steps-marker-color	var(--#{$prefix}white)
$steps-color-active	var(--#{$prefix}primary)
$steps-title-color	var(--#{$prefix}dark)
$steps-title-bg	var(--#{$prefix}white)
$steps-title-font-weight	500
$steps-divider-height	0.2em
$steps-content-spacer	1rem
$steps-content-padding	1rem
$steps-vertical-padding	1em 0

See ➜ 📄 Full scss file