Stepper

Skip to page content

BETA

Component demo

Interactive example

Order coffee

Pay for order

Collect

Web component

React

<ic-stepper>
<ic-stepheading="Order coffee"type="completed"></ic-step>
<ic-stepheading="Pay for order"type="current"></ic-step>
<ic-stepheading="Collect"type="disabled"></ic-step>
</ic-stepper>

<IcStepper>
<IcStepheading="Order coffee"type="completed"/>
<IcStepheading="Pay for order"type="current"/>
<IcStepheading="Collect"type="disabled"/>
</IcStepper>

Step details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property heading Attribute heading	The title of the step within the stepper. type: string
Property status Attribute status	The status of the step. Use this prop to display a status message on the step if it is required or optional. type: IcStepStatuses - "optional" \| "required"
Property subheading Attribute subheading	Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status. type: string
Property type Attribute type	The state of the step within the stepper. type: IcStepTypes - "active" \| "completed" \| "current" \| "disabled"	"active"

Property

heading

Attribute

heading

The title of the step within the stepper.

type: string

Property

status

Attribute

status

The status of the step. Use this prop to display a status message on the step if it is required or optional.

type: IcStepStatuses - "optional" | "required"

Property

subheading

Attribute

subheading

Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.

type: string

Property

type

Attribute

type

The state of the step within the stepper.

type: IcStepTypes - "active" | "completed" | "current" | "disabled"

Default: "active"

Stepper details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property aligned Attribute aligned	The alignment of the default stepper within its container. type: IcStepperAlignment - "full-width" \| "left"	"full-width"
Property connectorWidth Attribute connector-width	The length of the connector between each step in pixels. Minimum length is 100px. type: number	100
Property hideStepInfo Attribute hide-step-info	If`true` , the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper. type: boolean	false
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"
Property variant Attribute variant	The variant of the stepper. type: IcStepVariants - "compact" \| "default"	"default"

Property

aligned

Attribute

aligned

The alignment of the default stepper within its container.

type: IcStepperAlignment - "full-width" | "left"

Default: "full-width"

Property

connectorWidth

Attribute

connector-width

The length of the connector between each step in pixels. Minimum length is 100px.

type: number

Default: 100

Property

hideStepInfo

Attribute

hide-step-info

Iftrue , the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.

type: boolean

Default: false

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"

Default: "inherit"

Property

variant

Attribute

variant

The variant of the stepper.

type: IcStepVariants - "compact" | "default"

Default: "default"

Variants

Compact stepper

Interactive example

Order coffee

1 of 3

Completed

Next : Pay for order

Pay for order

2 of 3

Next : Collect

Collect

3 of 3

Not required

Last step

Web component

React

<ic-steppervariant="compact">
<ic-stepheading="Order coffee"type="completed"></ic-step>
<ic-stepheading="Pay for order"type="current"></ic-step>
<ic-stepheading="Collect"type="disabled"></ic-step>
</ic-stepper>

<IcSteppervariant="compact">
<IcStepheading="Order coffee"type="completed"/>
<IcStepheading="Pay for order"type="current"/>
<IcStepheading="Collect"type="disabled"/>
</IcStepper>

Left-aligned

Interactive example

Order coffee

Pay for order

Collect

Web component

React

<ic-stepperaligned="left">
<ic-stepheading="Order coffee"type="completed"></ic-step>
<ic-stepheading="Pay for order"type="current"></ic-step>
<ic-stepheading="Collect"type="disabled"></ic-step>
</ic-stepper>

<IcStepperaligned="left">
<IcStepheading="Order coffee"type="completed"/>
<IcStepheading="Pay for order"type="current"/>
<IcStepheading="Collect"type="disabled"/>
</IcStepper>

With hidden step information

Interactive example

Order coffee

Pay for order

Collect

Web component

React

<ic-stepperhide-step-info="true">
<ic-stepheading="Order coffee"type="completed"></ic-step>
<ic-stepheading="Pay for order"type="current"></ic-step>
<ic-stepheading="Collect"type="disabled"></ic-step>
</ic-stepper>

<IcStepperhideStepInfo>
<IcStepheading="Order coffee"type="completed"/>
<IcStepheading="Pay for order"type="current"/>
<IcStepheading="Collect"type="disabled"/>
</IcStepper>

With subtitles

Interactive example

Order coffee

Customise your order

Optional

Pay for order

We accept all major debit/credit cards

Collect

Web component

React

<ic-stepper>
<ic-stepheading="Order coffee"type="completed"></ic-step>
<ic-step
heading="Customise your order"
subheading="Optional"
type="completed"
>
</ic-step>
<ic-step
heading="Pay for order"
subheading="We accept all major debit/credit cards"
type="current"
>
</ic-step>
<ic-stepheading="Collect"type="disabled"></ic-step>
</ic-stepper>

<IcStepper>
<IcStepheading="Order coffee"type="completed"/>
<IcStep
heading="Customise your order"
subheading="Optional"
type="completed"
/>
<IcStep
heading="Pay for order"
subheading="We accept all major debit/credit cards"
type="current"
/>
<IcStepheading="Collect"type="disabled"/>
</IcStepper>

Custom connector width

Interactive example

Order coffee

Pay for order

Collect

Web component

React

<ic-stepperconnector-width="150">
<ic-stepheading="Order coffee"type="completed"></ic-step>
<ic-stepheading="Pay for order"type="current"></ic-step>
<ic-stepheading="Collect"type="disabled"></ic-step>
</ic-stepper>

<IcStepperaligned="left"connectorWidth={150}>
<IcStepheading="Order coffee"type="completed"/>
<IcStepheading="Pay for order"type="current"/>
<IcStepheading="Collect"type="disabled"/>
</IcStepper>

Theme

Interactive example

Order coffee

Pay for order

Collect

Web component

React

<ic-steppertheme="dark">
<ic-stepheading="Order coffee"type="completed"></ic-step>
<ic-stepheading="Pay for order"type="current"></ic-step>
<ic-stepheading="Collect"type="disabled"></ic-step>
</ic-stepper>

<IcSteppertheme="dark">
<IcStepheading="Order coffee"type="completed"/>
<IcStepheading="Pay for order"type="current"/>
<IcStepheading="Collect"type="disabled"/>
</IcStepper>

Last reviewed 31 May 2024 .