Light Dark System

Stepper

<cw-stepper> | CwStepper
Since 1.5 experimental

Steppers show progress through a sequence of steps — a step indicator for multi-step forms, checkouts, and onboarding flows.

Steppers group multiple stepper items. Exactly one step is active at a time — clicking a step’s header, or using the arrow keys, activates it.

Account Shipping Payment Review 
<cw-stepper>
  <cw-stepper-item completed>Account</cw-stepper-item>
  <cw-stepper-item active>Shipping</cw-stepper-item>
  <cw-stepper-item>Payment</cw-stepper-item>
  <cw-stepper-item>Review</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 completed>Account</CwStepperItem>
    <CwStepperItem active>Shipping</CwStepperItem>
    <CwStepperItem>Payment</CwStepperItem>
    <CwStepperItem>Review</CwStepperItem>
  </CwStepper>
);

Examples

Vertical Orientation

Add the orientation="vertical" attribute to lay steps out vertically instead of horizontally.

Account Shipping Payment Review 
<cw-stepper orientation="vertical">
  <cw-stepper-item completed>Account</cw-stepper-item>
  <cw-stepper-item active>Shipping</cw-stepper-item>
  <cw-stepper-item>Payment</cw-stepper-item>
  <cw-stepper-item>Review</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 orientation="vertical">
    <CwStepperItem completed>Account</CwStepperItem>
    <CwStepperItem active>Shipping</CwStepperItem>
    <CwStepperItem>Payment</CwStepperItem>
    <CwStepperItem>Review</CwStepperItem>
  </CwStepper>
);

Linear Mode

By default, any step can be activated at any time. Add the linear attribute to require steps to be completed in order — a step can only be activated if every step before it is completed, or it’s the very next one after the last completed step.

Account Shipping Payment Review 
<cw-stepper linear>
  <cw-stepper-item active completed>Account</cw-stepper-item>
  <cw-stepper-item>Shipping</cw-stepper-item>
  <cw-stepper-item>Payment</cw-stepper-item>
  <cw-stepper-item>Review</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 linear>
    <CwStepperItem active completed>
      Account
    </CwStepperItem>
    <CwStepperItem>Shipping</CwStepperItem>
    <CwStepperItem>Payment</CwStepperItem>
    <CwStepperItem>Review</CwStepperItem>
  </CwStepper>
);

Error State

Add the error attribute to an individual stepper item to flag a problem with that step.

Account Shipping Payment Review 
<cw-stepper>
  <cw-stepper-item completed>Account</cw-stepper-item>
  <cw-stepper-item active error>Shipping</cw-stepper-item>
  <cw-stepper-item>Payment</cw-stepper-item>
  <cw-stepper-item>Review</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 completed>Account</CwStepperItem>
    <CwStepperItem active error>
      Shipping
    </CwStepperItem>
    <CwStepperItem>Payment</CwStepperItem>
    <CwStepperItem>Review</CwStepperItem>
  </CwStepper>
);

Disabled Step

Add the disabled attribute to an individual stepper item to prevent it from being activated, whether by click or by keyboard navigation.

Account Shipping Payment 
<cw-stepper>
  <cw-stepper-item active>Account</cw-stepper-item>
  <cw-stepper-item disabled>Shipping</cw-stepper-item>
  <cw-stepper-item>Payment</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>Account</CwStepperItem>
    <CwStepperItem disabled>Shipping</CwStepperItem>
    <CwStepperItem>Payment</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/stepper.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/stepper.js';

To import this component using a bundler:

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

To import this component as a React component:

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

Slots

Name Description
(default) One or more <cw-stepper-item> elements to display.

Learn more about using slots.

Properties

Name Description Reflects Type Default
orientation The orientation the steps are laid out in. 'horizontal' | 'vertical' 'horizontal'
linear In linear mode, a step can only be activated if every step before it is completed (or it’s the very next step after the last completed one) — this prevents jumping ahead in a required sequence. Off by default, so any step can be activated at any time. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.