Light Dark System

Stepper Item

<cw-stepper-item> | CwStepperItem
Since 1.5 experimental

Stepper items are individual steps used inside a stepper — a step indicator for multi-step forms, checkouts, and onboarding flows.

Toggle Me 
<cw-stepper>
  <cw-stepper-item active>Toggle Me</cw-stepper-item>
</cw-stepper>

import CwStepper from '@cordwainer/cw-elements/dist/react/stepper';
import CwStepperItem from '@cordwainer/cw-elements/dist/react/stepper-item';

const App = () => (
  <CwStepper>
    <CwStepperItem active>Toggle Me</CwStepperItem>
  </CwStepper>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/stepper-item/stepper-item.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/stepper-item/stepper-item.js';

To import this component using a bundler:

import '@cordwainer/cw-elements/dist/components/stepper-item/stepper-item.js';

To import this component as a React component:

import CwStepperItem from '@cordwainer/cw-elements/dist/react/stepper-item';

Slots

Name Description
(default) The step’s label.
completed-icon Optional icon to use instead of the default checkmark when the step is completed.
error-icon Optional icon to show instead of the step number when the step has an error. By default the indicator keeps showing the step number (recolored) in the error state — this slot only renders when you explicitly provide content for it.

Learn more about using slots.

Properties

Name Description Reflects Type Default
active Indicates whether or not this is the current step. Only one step in a <cw-stepper> should be active at a time — the stepper manages this for you as steps are activated, but you can also set it directly. boolean false
completed Indicates that this step has been completed. Steppers in linear mode use this to gate which steps can be reached. boolean false
disabled Disables the step so it can’t be activated. boolean false
error Indicates that this step has an error, shown as a distinct visual state on the indicator. boolean false
index The step’s position within its <cw-stepper>, 1-based. Set automatically by the parent stepper — you shouldn’t need to set this yourself. number 1
orientation The orientation of the stepper this item belongs to, used to draw the connecting line to the next step. Set automatically by the parent stepper — you shouldn’t need to set this yourself. 'horizontal' | 'vertical' 'horizontal'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
cw-show onCwShow Emitted when the step becomes active. -
cw-after-show onCwAfterShow Emitted after the step becomes active. -
cw-hide onCwHide Emitted when the step is no longer active. -
cw-after-hide onCwAfterHide Emitted after the step is no longer active. -

Learn more about events.

Methods

Name Description Arguments
focus() Moves focus to the step’s header. options: FocusOptions
blur() Removes focus from the step’s header. -
show() Activates the step, making it the current one. -
hide() Deactivates the step. Only the parent <cw-stepper> normally needs to call this. -

Learn more about methods.

Parts

Name Description
base The component’s base wrapper.
header The clickable header containing the indicator and label.
indicator The circular indicator showing the step number, or a completed icon once the step is done.
label The container that wraps the step’s label.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <cw-icon>