API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| complete | complete | When present, the step has been completed. | boolean | false |
| description | description | A description for the component. Displays below the header text. | string | |
| disabled | disabled | When present, interaction is prevented and the component is displayed with lower opacity. | boolean | false |
| error | error | When present, the component contains an error that requires resolution from the user. | boolean | false |
| heading | heading | The component header text. | string | |
| iconFlipRtl | icon-flip-rtl | When present, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | false |
| messageOverrides | Use this property to override individual strings used by the component. | Record<string, unknown> | ||
| selected | selected | When present, 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 | Specifies the component's header text color when selected. |
| --calcite-stepper-item-icon-color | Specifies the component's icon color. |
| --calcite-stepper-item-complete-icon-color | Specifies the component's icon color when complete. |
| --calcite-stepper-item-error-icon-color | Specifies the component's icon and number color when in error. |
| --calcite-stepper-item-selected-icon-color | Specifies the component's icon and number color when selected. |
| --calcite-stepper-item-description-text-color | Specifies the component's description and number text color. |
| --calcite-stepper-item-description-text-color-hover | Specifies the component's description text color when hovered, focused or selected. |
| --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 | Specifies the component's fill color when complete. |
| --calcite-stepper-bar-complete-fill-color-hover | When the component is complete, specifies the component's fill color when hovered or focused. |
| --calcite-stepper-bar-error-fill-color | Specifies the component's fill color when in error. |
| --calcite-stepper-bar-error-fill-color-hover | When the component contains an error, specifies the component's fill color when hovered or focused. |
| --calcite-stepper-bar-selected-fill-color | Specifies the component's fill color when selected. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |