Wizard Complex component

Components discussed:

The component leads the user through a process consisting of multiple steps using a series of settings. The wizard is capable of handling any number of steps. You can define an icon, a title and a description for every step. These indicate the progress in the component header. You can track the current step status and the status of each step.

The component enables you to handle the step initialization, enter and exit events. It also handles the events next step, previous step and finish. You have the possibility to disable the individual steps which keeps the user at the specific step until the required data is entered.

Each step is added to the component as a standalone component by using the Wizard.addStep(WizardStep) component. You can implement a step by instantiating and building the WizardStep. You can add any sort of component to the steps, so that each step has a custom appearance.


The component is not a standalone component, it is used by the Wizard. The component represents a wizard step. You can use it to create components and forms, fill them with data, set them and add them to a wizard step. The step is displayed and managed by the wizard component. The step component has its own events implemented. The events handlers are associated with the events “leave step”, “show step” and “proceed to next one”. Event handlers enable you to validate the data entered by the user or to cancel navigation. If the user enters incorrect data, you can cancel navigation and the user is unable to leave the step until correct data is entered. In the below example, we see three WizardStep components. Users can proceed to the next step by clicking on "Next" at the bottom or return to a previous step by clicking on "Back".

Style customization


Default value

Derived value

Computed value


$wizard-bg-color $white $wizard-bg-color-->$white-->#fff #fff Wizard background color.
$wizard-iconbar-bg-color $wizard-bg-color $wizard-iconbar-bg-color-->$wizard-bg-color-->#fff #fff Wizard icons container background color.
$wizard-iconbar-border-bottom 1px solid $gray-200 $wizard-iconbar-border-bottom-->1px solid $gray-200-->1px solid #e9ecef 1px solid #e9ecef Wizard icons container separating bar.
$wizard-icon-bg-color $wizard-bg-color $wizard-icon-bg-color-->$wizard-bg-color-->#fff #fff Wizard icons background color.
$wizard-icon-border-width $spacer * 0.3 $wizard-icon-border-width-->$spacer * 0.3-->1rem * 0.3 0.3rem Wizard icons frame width.
$wizard-icon-border-color $gray-200 $wizard-icon-border-color-->$gray-200-->#e9ecef #e9ecef Wizard icons frame color.
$wizard-icon-bg-color-active $info $wizard-icon-bg-color-active-->$info-->#007BFF #007BFF Wizard icons background color.
$wizard-icon-bg-color-done $primary $wizard-icon-bg-color-done-->$primary-->#079e97 #079e97 Wizard “READY” icon background color.
$wizard-icon-bg-color-invalid $warning $wizard-icon-bg-color-invalid-->$warning-->#ffc107 #ffc107 Wizard “ERROR” icon background color.
$wizard-icon-bg-color-disabled $gray-200 $wizard-icon-bg-color-disabled-->$gray-200-->#e9ecef #e9ecef Wizard “NOT AVAILABLE” icon background color.
$wizard-content-bg-color $wizard-bg-color $wizard-content-bg-color-->$wizard-bg-color-->#fff #fff Wizard content background color.
$wizard-content-padding $spacer * 0.7 $wizard-content-padding-->$spacer * 0.7-->1rem * 0.7 0.7rem Wizard content padding.
$wizard-icons-line-color $gray-200 $wizard-icons-line-color-->$gray-200-->#e9ecef #e9ecef Wizard line color spanning over icons.
$wizard-icons-line-width $spacer * 0.3 $wizard-icons-line-width-->$spacer * 0.3-->1rem * 0.3 0.3rem Wizard line weight spanning over icons.
$wizard-footer-bg-color $wizard-bg-color $wizard-footer-bg-color-->$wizard-bg-color-->#fff #fff Wizard footer background color.
$wizard-footer-border-top 1px solid $gray-200 $wizard-footer-border-top-->1px solid $gray-200-->1px solid  #e9ecef 1px solid  #e9ecef Footer separating bar.
$wizard-footer-btn-margin-right $spacer * 1.65 $wizard-footer-btn-margin-right-->$spacer * 1.65-->1rem * 1.65 1.65rem Spacing between footer buttons.
$wizard-footer-padding $spacer * 0.7 $wizard-footer-padding-->$spacer * 0.7-->1rem * 0.7 0.7rem Footer padding.
$wizard-icon-color-active $white $wizard-icon-color-active-->$white-->#fff #fff Active icon color.
$wizard-icon-color $gray-200 $wizard-icon-color-->$gray-200-->#e9ecef #e9ecef Icon default color.
$wizard-icon-color-disabled $wizard-bg-color $wizard-icon-color-disabled-->$wizard-bg-color-->#fff #fff Disabled icon color.
$wizard-icon-size $spacer * 2.5 $wizard-icon-size-->$spacer * 2.5-->1rem * 2.5 2.5rem Wizard icon size.
$wizard-icon-font-size $spacer * 1.15 $wizard-icon-font-size-->$spacer * 1.15-->1rem * 1.15 1.15rem Wizard icon font size.
$wizard-icon-active-size $spacer * 3.6 $wizard-icon-active-size-->$spacer * 3.6-->1rem * 3.6 3.6rem Wizard icon active size.
$wizard-icon-active-font-size $spacer * 1.8 $wizard-icon-active-font-size-->$spacer * 1.8-->1rem * 1.8 1.8rem Wizard icon active font size.

Related pages