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.
- 1 Setup
- 2 Configure
- 3 Finish
---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:
- 1 SetupGet ready
- 2 ConfigurePreferences
- 3 FinishFinal steps
<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:
- 1 SetupGet ready
- 2 ConfigurePreferences
- 3 FinishFinal steps
- 1 SetupGet ready
- 2 ConfigurePreferences
- 3 FinishFinal steps
<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:
-
SetupGet ready
-
ConfigurePreferences
- 3 FinishFinal steps
<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 componentimport { 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' }]}>
Icon
component. Colors and Styles
To customize the colors of your Stepper
component, use the color
, completedColor
, and activeColor
props:
-
SetupGet ready
-
ConfigurePreferences
- 3 FinishFinal steps
<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
:
-
SetupGet ready
-
ConfigurePreferences
- 3 FinishFinal steps
-
SetupGet ready
-
ConfigurePreferences
- 3 FinishFinal steps
<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
:
-
SetupGet ready
-
ConfigurePreferences
- 3 FinishFinal steps
<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}
Prop | Purpose |
---|---|
items | Sets the steps for the stepper. |
items.icon | Sets an icon for the stepper. Can be an icon type for Astro components, or an SVG string for Svelte/React. |
items.title | Sets a title for the step. |
items.subTitle | Sets a subtitle for the step. |
items.completed | Sets the step as completed. |
items.active | Sets the step as active. |
color | Sets the color of steps. |
completedColor | Sets the color of completed steps. |
activeColor | Sets the color of active steps. |
borderless | Removes the borders from the steps. |
vertical | Sets the stepper to a vertical layout. |
className | Pass additional CSS classes for the stepper. |
Request improvement for this page