Stepper Item | Calcite Design System | Esri Developer

Child component of Stepper

API reference

Properties

Property	Attribute	Description	Type	Default
complete	complete	When `true`, completes the step.	`boolean`	`false`
description	description	Specifies a description for the component. Displays below the header text.	`string`
disabled	disabled	When `true`, prevents interaction and decreases the component's opacity.	`boolean`	`false`
error	error	When `true`, the component contains an error that requires resolution from the user.	`boolean`	`false`
heading	heading	Specifies the component's heading text.	`string`
iconFlipRtl	icon-flip-rtl	When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).	`boolean`	`false`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
selected	selected	When `true`, the component is selected.	`boolean`	`false`

Slots

Name	Description
default (unnamed)	A slot for adding custom content.

Events

Name	Description	Behavior
calciteStepperItemSelect	Fires when the active `calcite-stepper-item` changes.	bubblescomposed

Styles

Name	Description
--calcite-stepper-item-background-color-press	Specifies the component's background-color when active.
--calcite-stepper-item-header-text-color	Specifies the component's header text color.
--calcite-stepper-item-header-text-color-hover	Specifies the component's header text color when hovered or focused.
--calcite-stepper-item-selected-header-text-color	When `selected`, specifies the component's header text color.
--calcite-stepper-item-icon-color	Specifies the component's icon color.
--calcite-stepper-item-complete-icon-color	When `complete`, specifies the component's icon color.
--calcite-stepper-item-error-icon-color	When `error`, specifies the component's icon and number color.
--calcite-stepper-item-selected-icon-color	When `selected`, specifies the component's icon and number color.
--calcite-stepper-item-description-text-color	Specifies the component's description and number text color.
--calcite-stepper-item-description-text-color-hover	When `selected`, hovered, or focused, specifies the component's description text color.
--calcite-stepper-bar-gap	Specifies the component's bottom spacing.
--calcite-stepper-bar-fill-color	Specifies the component's fill color.
--calcite-stepper-bar-fill-color-hover	Specifies the component's fill color when hovered or focused.
--calcite-stepper-bar-complete-fill-color	When `complete`, specifies the component's fill color.
--calcite-stepper-bar-complete-fill-color-hover	When `complete`, specifies the component's fill color when hovered or focused.
--calcite-stepper-bar-error-fill-color	When `error`, specifies the component's fill color.
--calcite-stepper-bar-error-fill-color-hover	When `error`, specifies the component's fill color when hovered or focused.
--calcite-stepper-bar-selected-fill-color	When `selected`, specifies the component's fill color.

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`