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-steps v-model="selected" rounded>
        <o-step-item value="1" step="1" label="Account">
            <h1 :style="{ 'text-align': 'center' }">Account</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item value="2" step="2" label="Profile">
            <h1 :style="{ 'text-align': 'center' }">Profile</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item value="3" step="3" label="Social" disabled>
            <h1 :style="{ 'text-align': 'center' }">Social</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item value="4" step="4" label="Finish">
            <h1 :style="{ 'text-align': 'center' }">Finish</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>
    </o-steps>

    <p><b>Selected:</b> {{ selected }}</p>
</section>

JS

import { ref } from "vue";

const selected = ref<string>("1");

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.

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>

Customise

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 :style="{ 'text-align': 'center' }">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 :style="{ 'text-align': 'center' }">Profile</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item
            value="3"
            step="3"
            :visible="showSocial"
            label="Social"
            :clickable="isStepsClickable">
            <h1 :style="{ 'text-align': 'center' }">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 :style="{ 'text-align': 'center' }">Finish</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <template v-if="customNavigation" #navigation="{ previous, next }">
            <nav>
                <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()" />
            </nav>
        </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");
}

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="Variant">
            <o-select v-model="variant">
                <option :value="undefined">Default</option>
                <option value="success">Success</option>
                <option value="info">Info</option>
                <option value="warning">Warning</option>
                <option value="danger">Danger</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"
        :variant="variant"
        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>();
const variant = 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	Show next and previous buttons below the component	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 variant 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 unknown - updated modelValue prop	modelValue prop two-way binding
change	value unknown - new step value value unknown - 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. By default, 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	Step marker icon	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)	Numberish	-
value	Item value (it will be used as the v-model of the wrapper component) - default is an uuid	string|number|object	-
variant	Color variant of the control. This will override parent variant. Could be used to set a completed step to "success" for example.	string	primary, info, success, warning, danger, and any other custom color
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:

➜ Want to know how does the Class 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
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.
▷ 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
▷ stepActiveClass	Class of the step item element when active.
▷ 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 ➜ 📄 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 ➜ 📄 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 ➜ 📄 SCSS file