Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Stepper

Guidance Code Accessibility

Component demo

Interactive example

Web component React
StackBlitz
Show full code 
<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>

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 - string | undefined
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" | undefined
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 - string | undefined
Property type
Attribute type

The state of the step within the stepper.

type: IcStepTypes - "active" | "completed" | "current" | "disabled" | undefined
"active"
Property heading
Attribute heading

The title of the step within the stepper.

type: string - string | undefined
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" | undefined
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 - string | undefined
Property type
Attribute type

The state of the step within the stepper.

type: IcStepTypes - "active" | "completed" | "current" | "disabled" | undefined
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" | undefined
"full-width"
Property connectorWidth
Attribute connector-width

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

type: number - number | undefined
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 - boolean | undefined
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" | undefined
"inherit"
Property variant
Attribute variant

The variant of the stepper.

type: IcStepVariants - "compact" | "default" | undefined
"default"
Property aligned
Attribute aligned

The alignment of the default stepper within its container.

type: IcStepperAlignment - "full-width" | "left" | undefined
Default: "full-width"
Property connectorWidth
Attribute connector-width

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

type: number - number | undefined
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 - boolean | undefined
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" | undefined
Default: "inherit"
Property variant
Attribute variant

The variant of the stepper.

type: IcStepVariants - "compact" | "default" | undefined
Default: "default"

Variants

Compact stepper

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Left-aligned

Interactive example

Web component React
StackBlitz
Show full code 
<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>

With hidden step information

Interactive example

Web component React
StackBlitz
Show full code 
<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>

With subtitles

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Custom connector width

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Theme

Interactive example

Web component React
StackBlitz
Show full code 
<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>
Last reviewed 31 May 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Stepper - Intelligence Community Design System