Stepper

React Bootstrap 5 Stepper / Wizard component

Responsive stepper built with Bootstrap 5. Form wizard, vertical stepper, multi step form validation, optional step, mobile stepper & more.

Stepper is a component that displays content as a process with defined by user milestones. This is a great solution for a variety of registration forms, where you don't want to scare the user with lots of fields and questions.

In this documentation, you can find examples of form wizard, vertical stepper, horizontal stepper, multi step form, mobile stepper, validation & more.

Note: Read the API tab to find all available options and advanced customization

Basic example

You can automatically initialize the stepper component using MDBStepper.

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3 
import React from 'react';
import {
  MDBStepper,
  MDBStepperStep,
} from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBStepper>
      <MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua
      </MDBStepperStep>

      <MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat
      </MDBStepperStep>

      <MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </MDBStepperStep>
    </MDBStepper>
  );
}

Change steps using external elements

To go to the next or previous step, you can use the reference to the buttons.

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3 
import React, { useRef } from 'react';
import {
  MDBStepper,
  MDBStepperStep,
  MDBBtn
} from 'mdb-react-ui-kit';

export default function App() {
  const prevRef = useRef(null);
  const nextRef = useRef(null);

  return (
    <div className='w-100'>
      <div className='mb-3'>
        <MDBBtn ref={prevRef}>PREV</MDBBtn>
        <MDBBtn ref={nextRef}>NEXT</MDBBtn>
      </div>
      <div>
        <MDBStepper disableHeadSteps externalNext={nextRef} externalPrev={prevRef}>
          <MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
            et dolore magna aliqua
          </MDBStepperStep>

          <MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat
          </MDBStepperStep>

          <MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur
          </MDBStepperStep>
        </MDBStepper>
      </div>
    </div>
  );
}

Linear stepper

If you want to use basic validation before proceeding to the next step you can set linear property.

  • 1 step1
    invalid
  • 2 step2
  • 3 step3 
import React from 'react';
import {
  MDBStepper,
  MDBStepperStep,
  MDBStepperForm,
  MDBInput,
  MDBValidationItem,
  MDBBtn
} from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBStepper
      linear
    >
      <MDBStepperForm>
        <MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
          <MDBValidationItem invalid feedback='invalid'>
            <MDBInput label='step 1' required />
          </MDBValidationItem>
        </MDBStepperStep>

        <MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
          <MDBValidationItem invalid feedback='invalid'>
            <MDBInput label='step 2' required />
          </MDBValidationItem>
        </MDBStepperStep>

        <MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
          <MDBValidationItem invalid feedback='invalid'>
            <MDBInput wrapperClass='mb-4' label='step 3' required />
            <MDBBtn type='submit'>submit</MDBBtn>
          </MDBValidationItem>
        </MDBStepperStep>
      </MDBStepperForm>
    </MDBStepper>
  );
}

No editable stepper

You can set noEditable property to prevent you from editing the completed step again.

  • 1 step1
    invalid
  • 2 step2
  • 3 step3 
import React, { useState } from 'react';
import {
  MDBStepper,
  MDBStepperStep,
  MDBInput,
} from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBStepper noEditable>
      <MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
        <MDBInput label='step 1' />
      </MDBStepperStep>

      <MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
        <MDBInput label='step 2' />
      </MDBStepperStep>

      <MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
        <MDBInput label='step 3' />
      </MDBStepperStep>
    </MDBStepper>
  );
}

Vertical stepper

Set type='vertical' to use the vertical view.

  • 1 step1
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 2 step2
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultriciesUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
import React from 'react';
import {
  MDBStepper,
  MDBStepperStep,
} from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBStepper type='vertical'>
      <MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
        dolore magna aliqua
      </MDBStepperStep>

      <MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
        consequat
      </MDBStepperStep>

      <MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </MDBStepperStep>
    </MDBStepper>
  );
}

Mobile stepper

Set type='mobile' to use mobile view.

    step 1 of 3
  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3 
import React from 'react';
import {
  MDBStepper,
  MDBStepperStep,
} from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBStepper type='mobile'>
      <MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua
      </MDBStepperStep>

      <MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat
      </MDBStepperStep>

      <MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </MDBStepperStep>
    </MDBStepper>
  );
}

Mobile stepper progress bar

if the stepper contains more than 4 steps, the progress bar will be displayed by default instead of dots. You can edit the step limit with the mobileProgress property.

    step 1 of 12
  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3 
import React from 'react';
import {
  MDBStepper,
  MDBStepperStep,
} from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBStepper mobile mobileProgress>
      <MDBStepperStep itemId={1} icon='1' text='step1'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua
      </MDBStepperStep>

      <MDBStepperStep itemId={2} icon='2' text='step2'>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat
      </MDBStepperStep>

      <MDBStepperStep itemId={3} icon='3' text='step3'>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </MDBStepperStep>

      <MDBStepperStep itemId={4} icon='4' text='step4'>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </MDBStepperStep>

      <MDBStepperStep itemId={5} icon='5' text='step5'>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </MDBStepperStep>

      <MDBStepperStep itemId={6} icon='6' text='step6'>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </MDBStepperStep>

      <MDBStepperStep itemId={7} icon='7' text='step7'>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </MDBStepperStep>

      <MDBStepperStep itemId={8} icon='8' text='step8'>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </MDBStepperStep>
      <MDBStepperStep itemId={9} icon='9' text='step9'>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </MDBStepperStep>
      <MDBStepperStep itemId={10} icon='10' text='step10'>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </MDBStepperStep>

      <MDBStepperStep itemId={11} icon='11' text='step11'>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </MDBStepperStep>

      <MDBStepperStep itemId={12} icon='12' text='step12'>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </MDBStepperStep>
    </MDBStepper>
  );
}

Custom icons

if you want to use an icon instead of a step number you can do it by setting MDBStepperHead icon property.

  • step1
    invalid
  • step2
  • step3 
import React, { useState } from 'react';
import {
  MDBStepper,
  MDBStepperStep,
  MDBInput,
  MDBIcon,
  MDBSpinner
} from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBStepper>
      <MDBStepperStep headIcon={<MDBIcon fas icon='user' />} headText='step 1' itemId={1}>
        <MDBInput label='step 1' />
      </MDBStepperStep>

      <MDBStepperStep headIcon={<MDBIcon fas icon='envelope' />} headText='step 2' itemId={2}>
        <MDBInput label='step 2' />
      </MDBStepperStep>

      <MDBStepperStep headIcon={<MDBSpinner size='sm' />} headText='step 3' itemId={3}>
        <MDBInput label='step 3' />
      </MDBStepperStep>
    </MDBStepper>
  );
}

Form wizard

An example of so-called "Form wizard" with multiple inputs on each step.

  • 1 step1
    invalid
    invalid
  • 2 step2
  • 3 step3 
import React, { useState, useEffect, useRef } from 'react';
import {
  MDBStepper,
  MDBStepperStep,
  MDBStepperForm,
  MDBInput,
  MDBCheckbox,
  MDBBtn,
  MDBValidationItem,
  MDBTextArea
} from 'mdb-react-ui-kit';

export default function App() {
  const wizardNextRef = useRef(null);
  const wizardPrevRef = useRef(null);

  const [wizardRefs, setWizardRefs] = useState<{
    prev: React.MutableRefObject<any> | null;
    next: React.MutableRefObject<any> | null;
  }>({ prev: null, next: null });

  useEffect(() => {
    setWizardRefs({ prev: wizardPrevRef, next: wizardNextRef });
  }, [wizardNextRef, wizardPrevRef]);

  return (
    <>
      <MDBStepper externalNext={wizardRefs.next} externalPrev={wizardRefs.prev} linear>
        <MDBStepperForm>
          <MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
            <MDBValidationItem invalid feedback='invalid'>
              <MDBInput
                wrapperClass='mb-4'
                label={
                  <>
                    First name <small className='text-muted'>(required)</small>
                  </>
                }
                required
              />
            </MDBValidationItem>
            <MDBValidationItem invalid feedback='invalid'>
              <MDBInput
                wrapperClass='mb-4'
                label={
                  <>
                    Last name <small className='text-muted'>(required)</small>
                  </>
                }
                required
              />
            </MDBValidationItem>
            <MDBValidationItem invalid feedback='invalid'>
              <MDBInput
                wrapperClass='mb-4'
                label={
                  <>
                    Nickname <small className='text-muted'>(required)</small>
                  </>
                }
                required
              />
            </MDBValidationItem>
          </MDBStepperStep>

          <MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
            <MDBValidationItem invalid feedback='invalid'>
              <MDBInput
                wrapperClass='mb-4'
                label={
                  <>
                    Company name <small className='text-muted'>(required)</small>
                  </>
                }
                required
              />
            </MDBValidationItem>
            <MDBValidationItem invalid feedback='invalid'>
              <MDBInput
                wrapperClass='mb-4'
                label={
                  <>
                    Address <small className='text-muted'>(required)</small>
                  </>
                }
                required
              />
            </MDBValidationItem>
            <MDBValidationItem invalid feedback='invalid'>
              <MDBInput
                wrapperClass='mb-4'
                type='email'
                label={
                  <>
                    Email <small className='text-muted'>(required)</small>
                  </>
                }
                required
              />
            </MDBValidationItem>
            <MDBValidationItem invalid feedback='invalid'>
              <MDBInput
                wrapperClass='mb-4'
                type='number'
                label={
                  <>
                    Phone <small className='text-muted'>(optional)</small>
                  </>
                }
              />
            </MDBValidationItem>
          </MDBStepperStep>

          <MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
            <MDBValidationItem invalid feedback='invalid'>
              <MDBTextArea rows={4} wrapperClass='mb-4' label='Additional information' required />
            </MDBValidationItem>

            <MDBValidationItem feedback=''>
              <MDBCheckbox
                wrapperClass='d-flex justify-content-center mb-4'
                label='Create an account?'
                required
              />
            </MDBValidationItem>

            <MDBBtn type='submit' block color='success' className='mb-4'>
              Place order
            </MDBBtn>
          </MDBStepperStep>
        </MDBStepperForm>
      </MDBStepper>
      <MDBBtn className='w-50' ref={wizardPrevRef}>
        previous step
      </MDBBtn>
      <MDBBtn className='w-50' ref={wizardNextRef}>
        next step
      </MDBBtn>
    </>
  );
}

Toggle to vertical or mobile on smaller screens

Change the stepper mode depending on window width.

  • step1
    invalid
  • step2
  • step3 
import React, { useState, useEffect, useCallback } from 'react';
import {
  MDBStepper,
  MDBStepperStep,
  MDBInput,
  MDBIcon,
  MDBSpinner
} from 'mdb-react-ui-kit';

export default function App() {
  const [mode, setMode] = useState<'horizontal' | 'vertical' | 'mobile'>('horizontal');

  const handleResize = useCallback(() => {
    const width = window.innerWidth;

    if (width > 768) {
      setMode('horizontal');
    } else if (width <= 768 && width > 400) {
      setMode('vertical');
    } else {
      setMode('mobile');
    }
  }, []);

  useEffect(() => {
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [handleResize]);

  return (
    <MDBStepper type={mode}>
      <MDBStepperStep headIcon={<MDBIcon fas icon='user' />} headText='step 1' itemId={1}>
        <MDBInput label='step 1' />
      </MDBStepperStep>

      <MDBStepperStep headIcon={<MDBIcon fas icon='envelope' />} headText='step 2' itemId={2}>
        <MDBInput label='step 2' />
      </MDBStepperStep>

      <MDBStepperStep headIcon={<MDBSpinner size='sm' />} headText='step 3' itemId={3}>
        <MDBInput label='step 3' />
      </MDBStepperStep>
    </MDBStepper>
  );
}

Events

Stepper emits events after successful step validation, after failed step validation, and before changing to another step. Check the browser console and try to change the step to see the result.

  • 1 step1
    invalid
  • 2 step2
  • 3 step3 
import React from 'react';
import {
  MDBStepper,
  MDBStepperStep,
  MDBValidationItem,
  MDBInput,
  MDBStepperForm,
  MDBBtn
} from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBStepper
      onValid={(id) => console.log('onValid')}
      onInvalid={(id) => console.log('onInvalid')}
      onChange={(id) => console.log('onChangeStep')}
      linear
    >
      <MDBStepperForm>
        <MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
          <MDBValidationItem invalid feedback='invalid'>
            <MDBInput label='step 1' required />
          </MDBValidationItem>
        </MDBStepperStep>

        <MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
          <MDBValidationItem invalid feedback='invalid'>
            <MDBInput label='step 2' required />
          </MDBValidationItem>
        </MDBStepperStep>

        <MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
          <MDBValidationItem invalid feedback='invalid'>
            <MDBInput wrapperClass='mb-4' label='step 3' required />
            <MDBBtn type='submit'>submit</MDBBtn>
          </MDBValidationItem>
        </MDBStepperStep>
      </MDBStepperForm>
    </MDBStepper>
  );
}

Add custom validation

You can use the customValidation method with MDBStepperStep component to use your own validation.

  • 1 step1
    Password should have 5 or more characters
  • 2 step2
  • 3 step3 
import React from 'react';
import {
  MDBStepper,
  MDBStepperStep,
  MDBValidationItem,
  MDBBtn,
  MDBInput,
  MDBStepperForm
} from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBStepper linear>
      <MDBStepperForm>
        <MDBStepperStep
          customValidation={(input: HTMLInputElement) => {
            const inputLenght = input.value.length;

            if (inputLenght < 5) {
              input.setCustomValidity('Invalid');
            } else {
              input.setCustomValidity('');
            }

            return inputLenght >= 5;
          }}
          headIcon={1}
          headText='step 1'
          itemId={1}
        >
          <MDBValidationItem invalid feedback='password must have 5 sings'>
            <MDBInput type='password' label='step 1' required />
          </MDBValidationItem>
        </MDBStepperStep>

        <MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
          <MDBValidationItem invalid feedback='invalid'>
            <MDBInput label='step 2' required />
          </MDBValidationItem>
        </MDBStepperStep>

        <MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
          <MDBValidationItem invalid feedback='invalid'>
            <MDBInput wrapperClass='mb-4' label='step 3' required />
            <MDBBtn type='submit'>submit</MDBBtn>
          </MDBValidationItem>
        </MDBStepperStep>
      </MDBStepperForm>
    </MDBStepper>
  );
}

Stepper - API

Import

import {
  MDBStepper,
  MDBStepperStep,
  MDBStepperForm,
} from 'mdb-react-ui-kit';

Properties

MDBStepper

Name Type Default Description Example
defaultStep number 1 Change default step of the stepper. <MDBStepper defaultStep={3} />
disableHeadSteps boolean false Disable stepper head onClick change. <MDBStepper disableHeadSteps />
externalNext React.MutableRefObject null Reference to the external element, to change the stepper step to the next. <MDBStepper externalNext={nextRef} />
externalPrev React.MutableRefObject null Reference to the external element, to change the stepper step to the previous. <MDBStepper externalPrev={prevRef} />
linear boolean false Set to true to use the linear stepper <MDBStepper linear />
mobileOfLabel React.ReactNode 'of' Set custom of value in the mobile stepper head. <MDBStepper mobileOfLabel='at' />
mobileStepLabel React.ReactNode 'step' Set custom step value in the mobile stepper head. <MDBStepper mobileStepLabel='element' />
mobileBackLabel React.ReactNode 'BACK' Set custom text for BACK button. <MDBStepper mobileBackLabel='PREV' />
mobileNextLabel React.ReactNode 'NEXT' Set custom text for NEXT button. <MDBStepper mobileNextLabel='NXT' />
mobileProgress boolean false Enable mobile progress stepper. <MDBStepper type='mobile' mobileProgress />
noEditable boolean false Set to true to block editing of the completed step. <MDBStepper noEditable />
type 'horizontal' | 'vertical' | 'mobile' 'horizontal' Set the stepper view <MDBStepper type='vertical' />

MDBStepperStep

Name Type Default Description Example
contentClassName string '' Add custom classes to content element. <MDBStepperStep contentClassName="class" />
contentStyle React.CSSProperties - Add custom styles to content element. <MDBStepperStep contentStyle={customStyles} />
itemId number - Set the step unique id. <MDBStepperStep itemId={1} />
headClassName string '' Add custom classes to head element. <MDBStepperStep headClassName="class" />
headStyle React.CSSProperties - Add custom styles to head element. <MDBStepperStep headStyle={customStyles} />
headIcon React.ReactNode '0' Set step head icon. <MDBStepperStep headIcon='6' />
headText React.ReactNode 'none' Set step head text. <MDBStepperStep headText='step element' />

MDBStepperForm

For MDBStepperForm propeties check the MDBValidation properties.

Methods

MDBStepperStep

Name Type Description
customValidation (input: HTMLInputElement) => boolean Apply custom validation to the step.

Events

MDBStepper

Name Type Description
onChange (id: number) => void Event emitted before the step change.
onInvalid (id: number) => void Event emitted after unsuccessful step validation.
onValid (id: number) => void Event emitted after successful step validation.

CSS variables

As part of MDB’s evolving CSS variables approach, stepper now use local CSS variables on .stepper for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

// .steps
--#{$prefix}steps-transition: #{$steps-transition};

// .steps-step
--#{$prefix}steps-step-after-left: #{$steps-step-after-left};
--#{$prefix}steps-step-after-width: #{$steps-step-after-width};
--#{$prefix}steps-step-after-margin-top: #{$steps-step-after-margin-top};
--#{$prefix}steps-step-after-bg: #{$steps-step-after-bg};

// .steps-content
--#{$prefix}steps-content-padding-y: #{$steps-content-padding-y};

// .steps-head-vertical
--#{$prefix}steps-head-vertical-padding-top: #{$steps-head-vertical-padding-top};
--#{$prefix}steps-head-vertical-padding-x: #{$steps-head-vertical-padding-x};

// .steps-head-icon-vertical
--#{$prefix}steps-head-icon-vertical-margin-right: #{$steps-head-icon-vertical-margin-right};

// .steps-head
--#{$prefix}steps-head-line-height: #{$steps-head-line-height};
--#{$prefix}steps-head-hover-bgc: #{$steps-head-hover-bgc};

// .steps-head-text
--#{$prefix}steps-head-text-color: #{$steps-head-text-color};
--#{$prefix}steps-head-text-after-font-size: #{$steps-head-text-after-font-size};

// .steps-head-icon
--#{$prefix}steps-head-icon-font-size: #{$steps-head-icon-font-size};
--#{$prefix}steps-head-icon-width: #{$steps-head-icon-width};
--#{$prefix}steps-head-icon-height: #{$steps-head-icon-height};
--#{$prefix}steps-head-icon-font-weight: #{$steps-head-icon-font-weight};

// .steps-active-head-text
--#{$prefix}steps-active-head-text-font-weight: #{$steps-active-head-text-font-weight};

// .stepper
--#{$prefix}stepper-padding-x: #{$stepper-padding-x};
--#{$prefix}stepper-step-height: #{$stepper-step-height};
--#{$prefix}stepper-step-head-padding-left: #{$stepper-step-head-padding-left};
--#{$prefix}stepper-step-head-padding-right: #{$stepper-step-head-padding-right};
--#{$prefix}stepper-step-head-height: #{$stepper-step-head-height};
--#{$prefix}stepper-step-head-bg: #{$stepper-step-head-bg};
--#{$prefix}stepper-step-head-margin-right: #{$stepper-step-head-margin-right};
--#{$prefix}stepper-step-head-margin-left: #{$stepper-step-head-margin-left};
--#{$prefix}stepper-head-icon-margin-y: #{$stepper-head-icon-margin-y};
--#{$prefix}stepper-head-icon-margin-right: #{$stepper-head-icon-margin-right};
--#{$prefix}stepper-vertical-step-top: #{$stepper-vertical-step-top};
--#{$prefix}stepper-vertical-step-height: #{$stepper-vertical-step-height};
--#{$prefix}stepper-vertical-content-padding-left: #{$stepper-vertical-content-padding-left};
--#{$prefix}stepper-vertical-content-transition: #{$stepper-vertical-content-transition};
--#{$prefix}stepper-vertical-head-padding-bottom: #{$stepper-vertical-head-padding-bottom};
--#{$prefix}stepper-mobile-step-margin-y: #{$stepper-mobile-step-margin-y};
--#{$prefix}stepper-mobile-step-head-padding-x: #{$stepper-mobile-step-head-padding-x};
--#{$prefix}stepper-mobile-head-icon-height: #{$stepper-mobile-head-icon-height};
--#{$prefix}stepper-mobile-head-icon-width: #{$stepper-mobile-head-icon-width};
--#{$prefix}stepper-mobile-content-top: #{$stepper-mobile-content-top};
--#{$prefix}stepper-mobile-active-head-icon-bg: #{$stepper-mobile-active-head-icon-bg};
--#{$prefix}stepper-mobile-completed-head-icon-bg: #{$stepper-mobile-completed-head-icon-bg};
--#{$prefix}stepper-head-icon-bg: #{$stepper-head-icon-bg};
--#{$prefix}stepper-head-icon-color: #{$stepper-head-icon-color};
--#{$prefix}stepper-completed-head-icon-bg: #{$stepper-completed-head-icon-bg};
--#{$prefix}stepper-completed-head-icon-color: #{$stepper-completed-head-icon-color};
--#{$prefix}stepper-active-head-icon-bg: #{$stepper-active-head-icon-bg};
--#{$prefix}stepper-active-head-icon-color: #{$stepper-active-head-icon-color};
--#{$prefix}stepper-invalid-head-icon-bg: #{$stepper-invalid-head-icon-bg};
--#{$prefix}stepper-invalid-head-icon-color: #{$stepper-invalid-head-icon-color};
--#{$prefix}stepper-disabled-head-color: #{$stepper-disabled-head-color};
--#{$prefix}stepper-disabled-head-icon-bg: #{$stepper-disabled-head-icon-bg};
--#{$prefix}stepper-disabled-head-icon-color: #{$stepper-disabled-head-icon-color};
--#{$prefix}stepper-mobile-head-padding-y: #{$stepper-mobile-head-padding-y};
--#{$prefix}stepper-mobile-head-padding-x: #{$stepper-mobile-head-padding-x};
--#{$prefix}stepper-mobile-footer-height: #{$stepper-mobile-footer-height};
--#{$prefix}stepper-back-btn-i-margin-right: #{$stepper-back-btn-i-margin-right};
--#{$prefix}stepper-next-btn-i-margin-left: #{$stepper-next-btn-i-margin-left};
--#{$prefix}stepper-mobile-progress-bar-height: #{$stepper-mobile-progress-bar-height};
--#{$prefix}stepper-mobile-progress-height: #{$stepper-mobile-progress-height};
--#{$prefix}stepper-mobile-progress-background-color: #{$stepper-mobile-progress-background-color};

SCSS variables

// Steps
$steps-transition: height 0.2s ease-in-out;

$steps-step-after-left: 2.45rem;
$steps-step-after-width: 1px;
$steps-step-after-margin-top: 0.5rem;
$steps-step-after-bg: #dfdfdf;

$steps-content-padding-y: 1.5rem;

$steps-head-vertical-padding-top: 1.5rem;
$steps-head-vertical-padding-x: 1.5rem;

$steps-head-icon-vertical-margin-right: 0.75rem;

$steps-head-line-height: 1.3;
$steps-head-hover-bgc: rgba(0, 0, 0, 0.025);

$steps-head-text-color: $text-muted;
$steps-head-text-after-font-size: 0.8rem;

$steps-head-icon-font-size: 0.875rem;
$steps-head-icon-width: 1.938rem;
$steps-head-icon-height: 1.938rem;
$steps-head-icon-font-weight: 500;

$steps-active-head-text-font-weight: 500;

// Stepper
$stepper-padding-x: 1rem;

$stepper-step-height: 4.5rem;

$stepper-step-head-padding-left: 1.5rem;
$stepper-step-head-padding-right: 1.5rem;
$stepper-step-head-height: 1px;
$stepper-step-head-bg: rgba(0, 0, 0, 0.1);
$stepper-step-head-margin-right: 0.5rem;
$stepper-step-head-margin-left: 0.5rem;

$stepper-head-icon-margin-y: 1.5rem;
$stepper-head-icon-margin-right: 0.5rem;

$stepper-vertical-step-top: 3.25rem;
$stepper-vertical-step-height: calc(100% - 2.45rem);
$stepper-vertical-content-padding-left: 3.75rem;
$stepper-vertical-content-transition: height 0.3s ease-in-out, margin-top 0.3s ease-in-out,
  margin-bottom 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
$stepper-vertical-head-padding-bottom: 1.5rem;

$stepper-mobile-step-margin-y: 1rem;
$stepper-mobile-step-head-padding-x: 0.25rem;
$stepper-mobile-head-icon-height: 0.5rem;
$stepper-mobile-head-icon-width: 0.5rem;
$stepper-mobile-content-top: 2.56rem;
$stepper-mobile-active-head-icon-bg: rgb(55, 111, 200);
$stepper-mobile-completed-head-icon-bg: rgb(19, 150, 71);

$stepper-head-icon-bg: rgb(235, 237, 239);
$stepper-head-icon-color: rgb(64, 70, 79);

$stepper-completed-head-icon-bg: rgb(214, 240, 224);
$stepper-completed-head-icon-color: rgb(13, 104, 50);

$stepper-active-head-icon-bg: rgb(223, 231, 246);
$stepper-active-head-icon-color: rgb(44, 88, 160);

$stepper-invalid-head-icon-bg: rgb(249, 225, 229);
$stepper-invalid-head-icon-color: rgb(175, 35, 58);

$stepper-disabled-head-color: #808080;
$stepper-disabled-head-icon-bg: #e6e6e6;
$stepper-disabled-head-icon-color: #808080;

$stepper-mobile-head-padding-y: 0.5rem;
$stepper-mobile-head-padding-x: 1rem;
$stepper-mobile-footer-height: 2.5rem;

$stepper-back-btn-i-margin-right: 0.5rem;
$stepper-next-btn-i-margin-left: 0.5rem;

$stepper-mobile-progress-bar-height: 0.3rem;
$stepper-mobile-progress-height: 0.3rem;
$stepper-mobile-progress-background-color: $gray-300;