A step component used within a stepper to represent an individual step in a wizard-like workflow.
Element
igc-step
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`.

Remarks

[object Object]

Example

<igc-step>
  <igc-icon slot="indicator" name="home"></igc-icon>
  <span slot="title">Home</span>
  <span slot="subtitle">Return to the home page</span>
  <p>Welcome! This is the first step.</p>
</igc-step>

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 = false

Defined in src/components/stepper/step.ts:216

complete

Section titled "complete"

Whether the step is completed.

 
complete: boolean = false

Defined in src/components/stepper/step.ts:248

disabled

Section titled "disabled"

Whether the step is disabled.

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

 
disabled: boolean = false

Defined in src/components/stepper/step.ts:239

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 = false

Defined in src/components/stepper/step.ts:205

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 = false

Defined in src/components/stepper/step.ts:228

styles

Section titled "styles"

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

``

 
styles: CSSResult[]

Defined in src/components/stepper/step.ts:97