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. |
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 | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |