Stepper

Guide users through a series of steps

Use the Stepper component to guide users through a series of steps or stages in a process, such as registration, checkout, or onboarding. They provide clear progress tracking with a simplified navigation that improves usability.

---
import { Stepper } from 'webcoreui/astro'

const stepper = [
    { title: 'Setup' },
    { title: 'Configure' },
    { title: 'Finish' }
]
---

<Stepper items={stepper} />

<script>
    import { Stepper } from 'webcoreui/svelte'

    const stepper = [
        { title: 'Setup' },
        { title: 'Configure' },
        { title: 'Finish' }
    ]
</script>

<Stepper items={stepper} />

import React from 'react'
import { Stepper } from 'webcoreui/react'

const stepper = [
    { title: 'Setup' },
    { title: 'Configure' },
    { title: 'Finish' }
]

const Component = () => (
    <Stepper items={stepper} />
)

export default Component

The Stepper component expects an items prop in the form of an array of objects that can have the following properties:

• title: Sets a title for the step.
• subTitle: Sets a subtitle for the step.
• icon: Sets an icon for the step that replaces the number.
• completed: Sets the step to a completed state.
• active: Sets the step to an active state.

Steppers can also be created with additional subtitles using the subTitle prop:

<Stepper items={[
    { title: 'Setup', subTitle: 'Get ready' },
    { title: 'Configure', subTitle: 'Preferences' },
    { title: 'Finish', subTitle: 'Final steps' }
]} />

Stepper Statuses

The items of a Stepper component can accept two types of states: completed and active. Use them to indicate the progress of your stepper:

<Stepper items={[
    { title: 'Setup', subTitle: 'Get ready', completed: true },
    { title: 'Configure', subTitle: 'Preferences' },
    { title: 'Finish', subTitle: 'Final steps' }
]} />

<Stepper items={[
    { title: 'Setup', subTitle: 'Get ready', completed: true },
    { title: 'Configure', subTitle: 'Preferences', active: true },
    { title: 'Finish', subTitle: 'Final steps' }
]} />

Steppers with Icons

To customize your Stepper component, you can use icons. Pass an icon property to one of your items and specify the type of icon, or pass an SVG string to the property:

<Stepper items={[
    { title: 'Setup', subTitle: 'Get ready', completed: true, icon: 'circle-check' },
    { title: 'Configure', subTitle: 'Preferences', active: true, icon: 'github' },
    { title: 'Finish', subTitle: 'Final steps' }
]}>

// Import icons at the top of your component
import { github, circleCheck } from 'webcoreui/icons'

<Stepper items={[
    { title: 'Setup', subTitle: 'Get ready', completed: true, icon: circleCheck },
    { title: 'Configure', subTitle: 'Preferences', active: true, icon: github },
    { title: 'Finish', subTitle: 'Final steps' }
]}>

Colors and Styles

To customize the colors of your Stepper component, use the color, completedColor, and activeColor props:

<Stepper
    items={[ ... ]}
    color="var(--w-color-alert)"
    completedColor="var(--w-color-info)"
    activeColor="var(--w-color-warning)"
/>

You can reference the themes documentation page for the available color variables in Webcore. If you need to use custom colors for all of your Stepper components, you should override the following CSS variables once:

html body {
    --w-stepper-color-border: var(--w-color-primary-50);
    --w-stepper-color-active: var(--w-color-info);
    --w-stepper-color-complete: var(--w-color-success);
}

Additionally, in case you don’t want a border around your numbers and icons, you can remove them by setting the borderless prop to true:

<Stepper items={[ ... ]} borderless={true} />

Vertical Stepper

Due to limited space, the Stepper component is displayed vertically on smaller devices. This verticality can be kept by setting the vertical prop to true:

<Stepper items={[ ... ]} vertical={true} />

API

type StepperProps = {
    items: {
        icon?: string
        title?: string
        subTitle?: string
        completed?: boolean
        active?: boolean
    }[]
    color?: string
    completedColor?: string
    activeColor?: string
    borderless?: boolean
    vertical?: boolean
    className?: string
}