Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
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 icI18n

Words within the component that can be replaced to translate the component into a different language

type: IcStepI18n - { next: string; step: string; steps: string; of: string; lastStep: string; completed: string; notRequired: string; required: string; optional: string; }
{ next: "Next", step: "Step", steps: "Steps", of: "of", lastStep: "Last step", completed: "Completed", notRequired: "Not required", required: "Required", optional: "Optional", }
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 icI18n

Words within the component that can be replaced to translate the component into a different language

type: IcStepI18n - { next: string; step: string; steps: string; of: string; lastStep: string; completed: string; notRequired: string; required: string; optional: string; }
Default: { next: "Next", step: "Step", steps: "Steps", of: "of", lastStep: "Last step", completed: "Completed", notRequired: "Not required", required: "Required", optional: "Optional", }
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"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Read more about slots .


Name Description
Slot heading
Content will be rendered in place of the heading prop.
Slot heading
Content will be rendered in place of the heading prop.

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 icI18n

Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.

type: IcStepI18n - undefined | { next: string; step: string; steps: string; of: string; lastStep: string; completed: string; notRequired: string; required: string; optional: string; }
{ next: "Next", step: "Step", steps: "Steps", of: "of", lastStep: "Last step", completed: "Completed", notRequired: "Not required", required: "Required", optional: "Optional", }
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 icI18n

Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.

type: IcStepI18n - undefined | { next: string; step: string; steps: string; of: string; lastStep: string; completed: string; notRequired: string; required: string; optional: string; }
Default: { next: "Next", step: "Step", steps: "Steps", of: "of", lastStep: "Last step", completed: "Completed", notRequired: "Not required", required: "Required", optional: "Optional", }
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 Go to HMGCC website
Navigated to Stepper - Intelligence Community Design System