Stepper Base

Implementation
StepperBase Props
StepperBase.List Props
StepperBase.Step Props
StepperBase.Panel Props

The StepperBase provides a controllable stepper primitive. The caller sets the current step and each step’s outcome. Use Stepper for the linear wizard.StepperBase uses the same visual tokens as Stepper.

Common Examples

import { StepperBase } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <StepperBase index={2}>
      <StepperBase.List>
        <StepperBase.Step state="complete">Approved</StepperBase.Step>
        <StepperBase.Step state="complete">Reconciled</StepperBase.Step>
        <StepperBase.Step state="complete">
          Approved & Reconciled
        </StepperBase.Step>
        <StepperBase.Step>Scheduled</StepperBase.Step>
      </StepperBase.List>
    </StepperBase>
  );
}

Current and complete together

Completeness is the step state, not “this index is behind current.” A step can be current and complete at the same time.

Step outcomes

Set state on each StepperBase.Step to "not started", "started", or "complete". The default is "not started". Outcome does not change when index changes.

Adding panel content

Content can be added with StepperBase.Panel. The step prop on a panel must match the id on its StepperBase.Step. This is the inverse of Stepper, where the step’s controls prop names the panel.A step id is required only when a panel points at that step. Panel id is optional and is generated for aria-controls when omitted.The track is display-only by default. Set interactive to let click and keyboard change the current step. Pair a controlled index with onIndexChange. disabled on a step blocks activation from the track. Step onClick notifies only and does not replace onIndexChange.

Do not mix Stepper and StepperBase children in the same tree.

React Accessibility

The list uses role="tablist". Each step is a role="tab". A visible panel uses role="tabpanel"
The current step has aria-selected="true"
When a panel is present, the step sets aria-controls to the panel id
Disabled steps use aria-disabled so onClick still fires
Steps are tabIndex={-1} unless interactive is true, the step is current, and the step is not disabled
When interactive is true, Arrow Left and Arrow Right move among steps that are not disabled. Enter and Space activate the focused step

<StepperBase
  defaultIndex={0}
  index={2}
  interactive={false}
  onIndexChange={(index) => console.log(index)}
>
  <StepperBase.List>...</StepperBase.List>
  <StepperBase.Panel step="approved">...</StepperBase.Panel>
</StepperBase>

`StepperBase` Props

In addition to the props listed below, the StepperBase component can accept any valid HTML div props.

number

default:"0"

Uncontrolled start. Ignored when index is set.

number

Controlled current step (0-based). Pair with onIndexChange.

boolean

default:"false"

When true, click and keyboard can change the current step.

(index: number) => void

Fired when a step is activated.

<StepperBase.List>
  <StepperBase.Step>Approved</StepperBase.Step>
</StepperBase.List>

`StepperBase.List` Props

The StepperBase.List component can accept any valid HTML div props. Each StepperBase.Step that renders inside the list receives an index in render order, including steps inside fragments or wrappers.

<StepperBase.Step
  disabled={false}
  id="approved"
  state="complete"
  onClick={(e, index) => console.log(index)}
>
  Approved
</StepperBase.Step>

`StepperBase.Step` Props

In addition to the props listed below, the StepperBase.Step component can accept any valid HTML button props except onClick and disabled, which are replaced by the props below.

boolean

default:"false"

When true, this step cannot become current via click or keyboard.

string

Stable id. Required when a StepperBase.Panel points at this step.

(e: MouseEvent<HTMLButtonElement>, index?: number) => void

Notify only. Does not replace onIndexChange.

"not started" | "started" | "complete"

default:"not started"

Outcome of this step. Independent of whether it is current (index). Current plus any state is valid.

<StepperBase.Panel step="approved">Panel content</StepperBase.Panel>

`StepperBase.Panel` Props

In addition to the props listed below, the StepperBase.Panel component can accept any valid HTML div props.

string

required

id of the controlling StepperBase.Step.

string

Panel element id. Generated when omitted. Used for aria-controls.

Anvil2 Web

Resources

Stepper Base – Code

Common Examples

Current and complete together

Step outcomes

Adding panel content

Interactive navigation

React Accessibility

`StepperBase` Props

`StepperBase.List` Props

`StepperBase.Step` Props

`StepperBase.Panel` Props

​Common Examples

​Current and complete together

​Step outcomes

​Adding panel content

​Interactive navigation

​React Accessibility

​StepperBase Props

​StepperBase.List Props

​StepperBase.Step Props

​StepperBase.Panel Props

Common Examples

Current and complete together

Step outcomes

Adding panel content

Interactive navigation

React Accessibility

`StepperBase` Props

`StepperBase.List` Props

`StepperBase.Step` Props

`StepperBase.Panel` Props