This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.
Bootstrap 5 Stepper
Stepper
Build responsive, accessible multi-step forms and form wizards using CoreUI’s Bootstrap 5 Stepper Component. Vertical and horizontal layouts, built-in validation, full customization.
🤖 Looking for the LLM-optimized version?View llm.md
On this page
Stepper
The Bootstrap Stepper component allows you to easily create multi-step form wizards, perfect for guiding users through long forms, registrations, or checkout flows.It supports horizontal and vertical layouts, built-in form validation, accessibility features, and full customization.
If you’re looking for a Form Wizard in Bootstrap 5 or a flexible Stepper Component, CoreUI Stepper is the complete solution.
Example
A simple multi-step form built with the Bootstrap Stepper. Each step displays form content and controls navigation through buttons (next,prev,finish).
html
<divclass="stepper"data-coreui-toggle="stepper"id="myStepper"><olclass="stepper-steps"><liclass="stepper-step"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"data-coreui-target="#step-1"><spanclass="stepper-step-indicator">1</span><spanclass="stepper-step-label">Step 1</span></button></li><liclass="stepper-step"><buttontype="button"class="stepper-step-button active"data-coreui-toggle="step"data-coreui-target="#step-2"><spanclass="stepper-step-indicator">2</span><spanclass="stepper-step-label">Step 2</span></button></li><liclass="stepper-step"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"data-coreui-target="#step-3"><spanclass="stepper-step-indicator">3</span><spanclass="stepper-step-label">Step 3</span></button></li></ol><divclass="stepper-content"><divclass="stepper-pane"id="step-1"><formclass="row g-3 mb-4"><divclass="col-md-4"><labelfor="horizontalStepper01"class="form-label">First name</label><inputtype="text"class="form-control"id="horizontalStepper01"value="Łukasz"><divclass="valid-feedback"> Looks good!</div></div><divclass="col-md-4"><labelfor="horizontalStepper02"class="form-label">Last name</label><inputtype="text"class="form-control"id="horizontalStepper02"value="Holeczek"><divclass="valid-feedback"> Looks good!</div></div><divclass="col-md-4"><labelfor="horizontalStepperUsername"class="form-label">Username</label><divclass="input-group has-validation"><spanclass="input-group-text"id="inputGroupPrepend">@</span><inputtype="text"class="form-control"id="horizontalStepperUsername"aria-describedby="inputGroupPrepend"required><divclass="invalid-feedback"> Please choose a username.</div></div></div></form><buttonclass="btn btn-primary"data-coreui-stepper-action="next">Next</button></div><divclass="stepper-pane active show"id="step-2"><formclass="row g-3 mb-4"><divclass="col-md-6"><labelfor="horizontalStepper03"class="form-label">City</label><inputtype="text"class="form-control"id="horizontalStepper03"><divclass="invalid-feedback"> Please provide a valid city.</div></div><divclass="col-md-3"><labelfor="horizontalStepper04"class="form-label">State</label><selectclass="form-select"id="horizontalStepper04"><optionselecteddisabledvalue="">Choose...</option><option>...</option></select><divclass="invalid-feedback"> Please select a valid state.</div></div><divclass="col-md-3"><labelfor="horizontalStepper05"class="form-label">Zip</label><inputtype="text"class="form-control"id="horizontalStepper05"><divclass="invalid-feedback"> Please provide a valid zip.</div></div></form><buttonclass="btn btn-secondary"data-coreui-stepper-action="prev">Previous</button><buttonclass="btn btn-primary"data-coreui-stepper-action="next">Next</button></div><divclass="stepper-pane"id="step-3"><formclass="row g-3 mb-4"><divclass="col-md-6"><labelfor="horizontalStepper06"class="form-label">Email</label><inputtype="email"class="form-control"id="horizontalStepper06"></div><divclass="col-md-6"><labelfor="horizontalStepper07"class="form-label">Password</label><inputtype="password"class="form-control"id="horizontalStepper07"></div><divclass="col-12"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="horizontalStepper08"><labelclass="form-check-label"for="horizontalStepper08"> Check me out</label></div></div></form><buttonclass="btn btn-secondary"data-coreui-stepper-action="prev">Previous</button><buttonclass="btn btn-success"data-coreui-stepper-action="finish">Finish</button></div></div></div>Vertical indicator layout
Display step indicators vertically above labels using the.vertical modifier. This provides a compact and stylish layout for narrower screens or vertical designs.
html
<divclass="stepper"data-coreui-toggle="stepper"><olclass="stepper-steps"><liclass="stepper-step vertical"><buttontype="button"class="stepper-step-button active"data-coreui-toggle="step"><spanclass="stepper-step-indicator">1</span><spanclass="stepper-step-label">Step 1</span></button></li><liclass="stepper-step vertical"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"><spanclass="stepper-step-indicator">2</span><spanclass="stepper-step-label">Step 2</span></button></li><liclass="stepper-step vertical"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"><spanclass="stepper-step-indicator">3</span><spanclass="stepper-step-label">Step 3</span></button></li></ol></div>Vertical layout
Use the.stepper-vertical class to build a full vertical stepper, where both indicators and step content stack vertically. Ideal for mobile-first designs or top-to-bottom flows.
html
<divclass="stepper stepper-vertical"data-coreui-toggle="stepper"><olclass="stepper-steps"><liclass="stepper-step"><buttontype="button"class="stepper-step-button active"data-coreui-toggle="step"><spanclass="stepper-step-indicator">1</span><spanclass="stepper-step-label">Step 1</span></button><divclass="stepper-step-content"><divclass="py-3"><formclass="row g-3 mb-4"><divclass="col-md-4"><labelfor="horizontalStepper201"class="form-label">First name</label><inputtype="text"class="form-control"id="horizontalStepper201"value="Łukasz"><divclass="valid-feedback"> Looks good!</div></div><divclass="col-md-4"><labelfor="horizontalStepper202"class="form-label">Last name</label><inputtype="text"class="form-control"id="horizontalStepper202"value="Holeczek"><divclass="valid-feedback"> Looks good!</div></div><divclass="col-md-4"><labelfor="horizontalStepper2Username"class="form-label">Username</label><divclass="input-group has-validation"><spanclass="input-group-text"id="inputGroupPrepend">@</span><inputtype="text"class="form-control"id="horizontalStepper2Username"aria-describedby="inputGroupPrepend"><divclass="invalid-feedback"> Please choose a username.</div></div></div></form><buttonclass="btn btn-primary"data-coreui-stepper-action="next">Next</button></div></div></li><liclass="stepper-step"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"><spanclass="stepper-step-indicator">2</span><spanclass="stepper-step-label">Step 2</span></button><divclass="stepper-step-content"><divclass="py-3"><formclass="row g-3 mb-4"><divclass="col-md-6"><labelfor="horizontalStepper203"class="form-label">City</label><inputtype="text"class="form-control"id="horizontalStepper203"><divclass="invalid-feedback"> Please provide a valid city.</div></div><divclass="col-md-3"><labelfor="horizontalStepper204"class="form-label">State</label><selectclass="form-select"id="horizontalStepper204"><optionselecteddisabledvalue="">Choose...</option><option>...</option></select><divclass="invalid-feedback"> Please select a valid state.</div></div><divclass="col-md-3"><labelfor="horizontalStepper205"class="form-label">Zip</label><inputtype="text"class="form-control"id="horizontalStepper205"><divclass="invalid-feedback"> Please provide a valid zip.</div></div></form><buttonclass="btn btn-secondary"data-coreui-stepper-action="prev">Previous</button><buttonclass="btn btn-primary"data-coreui-stepper-action="next">Next</button></div></div></li><liclass="stepper-step"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"><spanclass="stepper-step-indicator">3</span><spanclass="stepper-step-label">Step 3</span></button><divclass="stepper-step-content"><divclass="pt-3"><formclass="row g-3 mb-4"><divclass="col-md-6"><labelfor="horizontalStepper206"class="form-label">Email</label><inputtype="email"class="form-control"id="horizontalStepper206"></div><divclass="col-md-6"><labelfor="horizontalStepper207"class="form-label">Password</label><inputtype="password"class="form-control"id="horizontalStepper207"></div><divclass="col-12"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="horizontalStepper208"><labelclass="form-check-label"for="horizontalStepper208"> Check me out</label></div></div></form><buttonclass="btn btn-secondary"data-coreui-stepper-action="prev">Previous</button><buttonclass="btn btn-success"data-coreui-stepper-action="finish">Finish</button></div></div></li></ol></div>Linear Stepper (Form Wizard)
By default, the Stepper Component behaves as a linear wizard: users must complete each step sequentially before moving to the next one.
Whenlinear mode is enabled (linear: true), users cannot skip steps. They must finish the current form validation successfully to unlock the next step.
Use a Linear Bootstrap Stepper when you need a guided and controlled experience, such as:
- Checkout processes
- Registration wizards
- Multistep forms with required validation
html
<divclass="stepper"data-coreui-toggle="stepper"><olclass="stepper-steps"><liclass="stepper-step"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"><spanclass="stepper-step-indicator">1</span><spanclass="stepper-step-label">Step 1</span></button></li><liclass="stepper-step"><buttontype="button"class="stepper-step-button active"data-coreui-toggle="step"><spanclass="stepper-step-indicator">2</span><spanclass="stepper-step-label">Step 2</span></button></li><liclass="stepper-step"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"><spanclass="stepper-step-indicator">3</span><spanclass="stepper-step-label">Step 3</span></button></li></ol></div>This ensures data integrity and improves the user experience by keeping the flow focused.
Non-linear Stepper (Optional Steps)
You can configure the Stepper Component to behave as non-linear, allowing users to jump freely between steps without validation restrictions. Adddata-coreui-linear="false" or setlinear: false to allow non-sequential navigation.
Use a Non-linear Bootstrap Stepper when users should have full control over navigation, for example:
- Survey forms
- Onboarding flows where some steps are optional
- Complex multi-section forms where order doesn’t matter
html
<divclass="stepper"data-coreui-linear="false"data-coreui-toggle="stepper"><olclass="stepper-steps"><liclass="stepper-step"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"><spanclass="stepper-step-indicator">1</span><spanclass="stepper-step-label">Step 1</span></button></li><liclass="stepper-step"><buttontype="button"class="stepper-step-button active"data-coreui-toggle="step"><spanclass="stepper-step-indicator">2</span><spanclass="stepper-step-label">Step 2</span></button></li><liclass="stepper-step"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"><spanclass="stepper-step-indicator">3</span><spanclass="stepper-step-label">Step 3</span></button></li></ol></div>In non-linear mode, all steps are accessible unless explicitly disabled.
Form Validation
The Stepper Component includes native HTML5 validation for each step. Before allowing the user to move to the next step, the associated form (if present) is validated automatically.
If a form is invalid, the stepper blocks navigation and displays validation messages.
Browser default validation
This example shows a stepper with native browser validation enabled:
html
<divclass="stepper"data-coreui-toggle="stepper"id="validationStepper"><olclass="stepper-steps"><liclass="stepper-step"><buttontype="button"class="stepper-step-button active"data-coreui-toggle="step"data-coreui-target="#validation-step-1"><spanclass="stepper-step-indicator">1</span><spanclass="stepper-step-label">Account</span></button></li><liclass="stepper-step"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"data-coreui-target="#validation-step-2"><spanclass="stepper-step-indicator">2</span><spanclass="stepper-step-label">Profile</span></button></li></ol><divclass="stepper-content"><divclass="stepper-pane active show"id="validation-step-1"><formclass="row g-3 mb-4"><divclass="col-md-6"><labelfor="validationEmail"class="form-label">Email</label><inputtype="email"class="form-control"id="validationEmail"required><divclass="invalid-feedback"> Please provide a valid email.</div></div><divclass="col-md-6"><labelfor="validationPassword"class="form-label">Password</label><inputtype="password"class="form-control"id="validationPassword"requiredminlength="8"><divclass="invalid-feedback"> Password must be at least 8 characters long.</div></div></form><buttonclass="btn btn-primary"data-coreui-stepper-action="next">Next</button></div><divclass="stepper-pane"id="validation-step-2"><formclass="row g-3 mb-4"><divclass="col-md-6"><labelfor="validationName"class="form-label">First name</label><inputtype="text"class="form-control"id="validationName"required><divclass="invalid-feedback"> Please provide your first name.</div></div><divclass="col-md-6"><labelfor="validationLastName"class="form-label">Last name</label><inputtype="text"class="form-control"id="validationLastName"required><divclass="invalid-feedback"> Please provide your last name.</div></div></form><buttonclass="btn btn-secondary"data-coreui-stepper-action="prev">Previous</button><buttonclass="btn btn-success"data-coreui-stepper-action="finish">Finish</button></div></div></div>Custom styles
To disable native browser styles validation and turn on custom styles, add thenovalidate attribute to your forms:
html
<divclass="stepper"data-coreui-toggle="stepper"id="novalidateStepper"><olclass="stepper-steps"><liclass="stepper-step"><buttontype="button"class="stepper-step-button active"data-coreui-toggle="step"data-coreui-target="#novalidate-step-1"><spanclass="stepper-step-indicator">1</span><spanclass="stepper-step-label">Account</span></button></li><liclass="stepper-step"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"data-coreui-target="#novalidate-step-2"><spanclass="stepper-step-indicator">2</span><spanclass="stepper-step-label">Profile</span></button></li></ol><divclass="stepper-content"><divclass="stepper-pane active show"id="novalidate-step-1"><formclass="row g-3 mb-4"novalidate><divclass="col-md-6"><labelfor="customEmail"class="form-label">Email</label><inputtype="email"class="form-control"id="customEmail"required><divclass="invalid-feedback"> Please provide a valid email.</div></div><divclass="col-md-6"><labelfor="customPassword"class="form-label">Password</label><inputtype="password"class="form-control"id="customPassword"requiredminlength="8"><divclass="invalid-feedback"> Password must be at least 8 characters long.</div></div></form><buttonclass="btn btn-primary"data-coreui-stepper-action="next">Next</button></div><divclass="stepper-pane"id="novalidate-step-2"><formclass="row g-3 mb-4"novalidate><divclass="col-md-6"><labelfor="customName"class="form-label">First name</label><inputtype="text"class="form-control"id="customName"required><divclass="invalid-feedback"> Please provide your first name.</div></div><divclass="col-md-6"><labelfor="customLastName"class="form-label">Last name</label><inputtype="text"class="form-control"id="customLastName"required><divclass="invalid-feedback"> Please provide your last name.</div></div></form><buttonclass="btn btn-secondary"data-coreui-stepper-action="prev">Previous</button><buttonclass="btn btn-success"data-coreui-stepper-action="finish">Finish</button></div></div></div>Skip validation
To completely skip form validation and allow free navigation between steps, adddata-coreui-skip-validation="true" to the stepper:
html
<divclass="stepper"data-coreui-toggle="stepper"data-coreui-skip-validation="true"id="skipValidationStepper"><olclass="stepper-steps"><liclass="stepper-step"><buttontype="button"class="stepper-step-button active"data-coreui-toggle="step"data-coreui-target="#skip-step-1"><spanclass="stepper-step-indicator">1</span><spanclass="stepper-step-label">Account</span></button></li><liclass="stepper-step"><buttontype="button"class="stepper-step-button"data-coreui-toggle="step"data-coreui-target="#skip-step-2"><spanclass="stepper-step-indicator">2</span><spanclass="stepper-step-label">Profile</span></button></li></ol><divclass="stepper-content"><divclass="stepper-pane active show"id="skip-step-1"><formclass="row g-3 mb-4"><divclass="col-md-6"><labelfor="skipEmail"class="form-label">Email</label><inputtype="email"class="form-control"id="skipEmail"required><divclass="invalid-feedback"> Please provide a valid email.</div></div><divclass="col-md-6"><labelfor="skipPassword"class="form-label">Password</label><inputtype="password"class="form-control"id="skipPassword"requiredminlength="8"><divclass="invalid-feedback"> Password must be at least 8 characters long.</div></div></form><buttonclass="btn btn-primary"data-coreui-stepper-action="next">Next</button></div><divclass="stepper-pane"id="skip-step-2"><formclass="row g-3 mb-4"><divclass="col-md-6"><labelfor="skipName"class="form-label">First name</label><inputtype="text"class="form-control"id="skipName"required><divclass="invalid-feedback"> Please provide your first name.</div></div><divclass="col-md-6"><labelfor="skipLastName"class="form-label">Last name</label><inputtype="text"class="form-control"id="skipLastName"required><divclass="invalid-feedback"> Please provide your last name.</div></div></form><buttonclass="btn btn-secondary"data-coreui-stepper-action="prev">Previous</button><buttonclass="btn btn-success"data-coreui-stepper-action="finish">Finish</button></div></div></div>Validation is fully automatic, no extra JavaScript is needed.
Accessibility (A11Y)
The CoreUI Stepper Component is built with accessibility in mind:
- Each step button is assigned proper ARIA roles (
role="tab") and attributes likearia-selected,aria-controls, andtabindex. - Step contents (
stepper-pane) userole="tabpanel"and are properly linked to their trigger buttons. - Live updates are announced to screen readers with
aria-live="polite". - Keyboard navigation is fully supported
Thanks to these features, your form wizard will be fully compliant with WCAG and modern accessibility standards without additional work.
Keyboard Support
The Stepper component supports comprehensive keyboard navigation out of the box:
| Key | Function |
|---|---|
| ArrowLeft /ArrowUp | Moves focus to previous step. |
| ArrowRight /ArrowDown | Moves focus to next step. |
| Home /End | Jumps focus to first or last step |
Usage
Heads up! In our documentation, all examples showstandard CoreUI implementation. If you are using aBootstrap-compatible version of CoreUI, remember to use the following changes:
- In the constructor, please usebootstrap instead ofcoreui. For example,
new bootstrap.Alert(...)instead ofnew coreui.Alert(...) - In events, please usebs instead ofcoreui, for example
close.bs.alertinstead ofclose.coreui.alert - In data attributes, please usebs instead ofcoreui. For example,
data-bs-toggle="..."instead ofdata-coreui-toggle="..."
Via data attributes
Adddata-coreui-toggle="stepper" to a
element to initialize a Stepper Component automatically via #"0">
<divclass="stepper"data-coreui-toggle="stepper"></div>Important: Every Bootstrap Stepper requires data-coreui-toggle=“stepper” to properly initialize and handle steps, navigation, and events.
Via JavaScript
Initialize the Stepper manually via #"0"><divclass="stepper"></div>
conststepperElementList=Array.prototype.slice.call(document.querySelectorAll('.stepper'))conststepperList=stepperElementList.map(stepperEl=>{returnnewcoreui.Stepper(stepperEl)})Options
| Option | Type | Default | Description |
|---|---|---|---|
linear | boolean | true | Forces steps to be completed in order (sequential navigation). Setfalse for free navigation. |
skipValidation | boolean | false | When set totrue, disables form validation completely, allowing users to navigate between steps regardless of form state. |
Methods
| Method | Description |
|---|---|
next() | Go to the next step. |
prev() | Go to the previous step. |
reset() | Reset the stepper to its initial state. |
finish() | Complete the form wizard and mark all steps as finished. |
showStep(buttonOrStepNumber) | Programmatically jump to a specific step button or step number. |
getInstance(element) | Retrieve the Stepper instance from a DOM element. |
getOrCreateInstance(element) | Get or create the Stepper instance associated with a DOM element. |
Events
| Event | Description |
|---|---|
finish.coreui.stepper | Triggered when the last step is completed. |
reset.coreui.stepper | Triggered when the stepper is reset. |
stepChange.coreui.stepper | Fired when the active step changes. |
stepValidationComplete.coreui.stepper | Fired after validating the current step’s form. |
Example:
constmyStepper=document.getElementById('myStepper')myStepper.addEventListener('stepChange.coreui.stepper',event=>{// console.log('Step changed to:', event.detail.index)})Customization
CSS Variables
The Stepper component uses CSS variables to allow easy customization of colors, borders, spacing, and indicators.
scss/_stepper.scss
--cui-stepper-steps-gap:#{$stepper-steps-gap};--cui-stepper-step-gap:#{$stepper-step-gap};--cui-stepper-step-button-width:#{$stepper-step-button-width};--cui-stepper-step-button-color:#{$stepper-step-button-color};--cui-stepper-step-button-active-color:#{$stepper-step-button-active-color};--cui-stepper-step-button-complete-color:#{$stepper-step-button-complete-color};--cui-stepper-step-button-disabled-color:#{$stepper-step-button-disabled-color};--cui-stepper-step-indicator-width:#{$stepper-step-indicator-width};--cui-stepper-step-indicator-height:#{$stepper-step-indicator-height};--cui-stepper-step-indicator-bg:#{$stepper-step-indicator-bg};--cui-stepper-step-indicator-color:#{$stepper-step-indicator-color};--cui-stepper-step-indicator-border-width:#{$stepper-step-indicator-border-width};--cui-stepper-step-indicator-border-color:#{$stepper-step-indicator-border-color};--cui-stepper-step-indicator-transition:#{$stepper-step-indicator-transition};--cui-stepper-step-indicator-active-color:#{$stepper-step-indicator-active-color};--cui-stepper-step-indicator-active-bg:#{$stepper-step-indicator-active-bg};--cui-stepper-step-indicator-active-border-color:#{$stepper-step-indicator-active-border-color};--cui-stepper-step-indicator-complete-color:#{$stepper-step-indicator-complete-color};--cui-stepper-step-indicator-complete-bg:#{$stepper-step-indicator-complete-bg};--cui-stepper-step-indicator-complete-border-color:#{$stepper-step-indicator-complete-border-color};--cui-stepper-step-indicator-disabled-color:#{$stepper-step-indicator-disabled-color};--cui-stepper-step-indicator-disabled-bg:#{$stepper-step-indicator-disabled-bg};--cui-stepper-step-indicator-disabled-border-color:#{$stepper-step-indicator-disabled-border-color};--cui-stepper-step-indicator-focus-box-shadow:#{$stepper-step-indicator-focus-box-shadow};--cui-stepper-step-indicator-icon:#{$stepper-step-indicator-icon};--cui-stepper-step-indicator-icon-color:#{$stepper-step-indicator-icon-color};--cui-stepper-step-indicator-icon-size:#{$stepper-step-indicator-icon-size};--cui-stepper-step-connector-height:#{$stepper-step-connector-height};--cui-stepper-step-connector-gap:#{$stepper-step-connector-gap};--cui-stepper-step-connector-bg:#{$stepper-step-connector-bg};--cui-stepper-step-connector-complete-bg:#{$stepper-step-connector-complete-bg};--cui-stepper-step-connector-transition:#{$stepper-step-connector-transition};--cui-stepper-step-content-transition:#{$stepper-step-content-transition};Sass Variables
Advanced theming is possible via Sass variables.
scss/_variables.scss
$stepper-steps-gap:.5rem;$stepper-step-gap:.5rem;$stepper-step-button-width:8rem;$stepper-step-button-color:var(--#{$prefix}secondary-color);$stepper-step-button-active-color:var(--#{$prefix}secondary-color);$stepper-step-button-complete-color:var(--#{$prefix}secondary-color);$stepper-step-button-disabled-color:var(--#{$prefix}secondary-color);$stepper-step-indicator-width:2rem;$stepper-step-indicator-height:2rem;$stepper-step-indicator-color:var(--#{$prefix}secondary);$stepper-step-indicator-bg:transparent;$stepper-step-indicator-border-width:var(--#{$prefix}border-width);$stepper-step-indicator-border-color:var(--#{$prefix}border-color);$stepper-step-indicator-transition:color.15sease-in-out,background-color.15sease-in-out,border-color.15sease-in-out,box-shadow.15sease-in-out;$stepper-step-indicator-active-color:var(--#{$prefix}primary);$stepper-step-indicator-active-bg:rgba(var(--#{$prefix}primary-rgb),.05);$stepper-step-indicator-active-border-color:var(--#{$prefix}primary);$stepper-step-indicator-complete-color:var(--#{$prefix}white);$stepper-step-indicator-complete-bg:var(--#{$prefix}primary);$stepper-step-indicator-complete-border-color:var(--#{$prefix}primary);$stepper-step-indicator-disabled-color:var(--#{$prefix}secondary);$stepper-step-indicator-disabled-bg:transparent;$stepper-step-indicator-disabled-border-color:var(--#{$prefix}border-color);$stepper-step-indicator-focus-box-shadow:$focus-ring-box-shadow;$stepper-step-indicator-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon fill='var(--ci-primary-color, currentColor)' points='200.359382.26961.057251.67382.943228.327199.641337.731428.686108.687451.314131.313200.359382.269' class='ci-primary'/%3E%3C/svg%3E");$stepper-step-indicator-icon-color:var(--#{$prefix}white);$stepper-step-indicator-icon-size:1rem;$stepper-step-connector-height:.125rem;$stepper-step-connector-gap:1rem;$stepper-step-connector-bg:var(--#{$prefix}secondary-bg);$stepper-step-connector-complete-bg:var(--#{$prefix}primary);$stepper-step-connector-transition:background-color.15sease-in-out;$stepper-step-content-transition:height.3sease-in-out;