A step component used within an igc-stepper to represent an individual step in a wizard-like workflow.
Slots
default — Renders the content of the step.
indicator — Renders the indicator of the step. By default, it displays the step index + 1.
title — Renders the title of the step.
subtitle — Renders the subtitle of the step.
CSS Parts
header-container — Wrapper of the step's `header` and its separators.
disabled — Indicates a disabled state. Applies to `header-container`.
complete-start — Indicates a complete state of the current step. Applies to `header-container`.
complete-end — Indicates a complete state of the previous step. Applies to `header-container`.
optional — Indicates an optional state. Applies to `header-container`.
invalid — Indicates an invalid state. Applies to `header-container`.
top — Indicates that the title should be above the indicator. Applies to `header-container`.
bottom — Indicates that the title should be below the indicator. Applies to `header-container`.
start — Indicates that the title should be before the indicator. Applies to `header-container`.
end — Indicates that the title should be after the indicator. Applies to `header-container`.
header — Wrapper of the step's `indicator` and `text`.
indicator — The indicator of the step.
text — Wrapper of the step's `title` and `subtitle`.
empty — Indicates that no title and subtitle have been provided to the step. Applies to `text`.
title — The title of the step.
subtitle — The subtitle of the step.
body — Wrapper of the step's `content`.
content — The step's `content`.

Properties

Section titled "Properties"

active

Section titled "active"

Whether the step is active.

Active steps are styled with an active state and their content is visible.

 
active: boolean

complete

Section titled "complete"

Whether the step is completed.

 
complete: boolean

disabled

Section titled "disabled"

Whether the step is disabled.

Disabled steps are styled with a disabled state and are not interactive.

 
disabled: boolean

invalid

Section titled "invalid"

Whether the step is invalid.

Invalid steps are styled with an error state and are not interactive when the stepper is in linear mode.

 
invalid: boolean

optional

Section titled "optional"

Whether the step is optional.

Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e. if optional step is invalid the user could still move to the next step.

 
optional: boolean