Navigation

Stepper

A progress sequence with completed, current, upcoming, and error states.

StepperView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

Configure, completed
Build, completed
Deploy, error, current step
Verify, upcoming

tsx

import { Cell } from "retend";

import { Stepper } from "innate-ui";
import classes from "../docs.module.css";

export function StepperDemo() {
  const currentStep = Cell.source(2);

  return (
    <div class={classes.stepperDemo}>
      <Stepper
        value={currentStep}
        onChange={(step) => currentStep.set(step)}
        ariaLabel="Account setup progress"
      >
        <Stepper.Item step={1}>Account</Stepper.Item>
        <Stepper.Item step={2}>Profile</Stepper.Item>
        <Stepper.Item step={3}>Security</Stepper.Item>
        <Stepper.Item step={4}>Review</Stepper.Item>
      </Stepper>

      <Stepper value={3} orientation="vertical" ariaLabel="Deployment progress">
        <Stepper.Item step={1}>Configure</Stepper.Item>
        <Stepper.Item step={2}>Build</Stepper.Item>
        <Stepper.Item step={3} state="error">
          Deploy
        </Stepper.Item>
        <Stepper.Item step={4}>Verify</Stepper.Item>
      </Stepper>
    </div>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

StepperProps

Prop	Type	Default
`value`required One-based number of the current step.	`JSX.ValueOrCell<number>`	`—`
`children`required `Stepper.Item` children.	`JSX.Children`	`—`
`orientation` Layout direction of the step sequence.	`JSX.ValueOrCell<StepperOrientation>`	`"horizontal"`
`ariaLabel`required Accessible label describing the progress sequence.	`JSX.ValueOrCell<string>`	`—`
`onChange` Called when an interactive step requests a different one-based step number.	`(step: number) => void`	`—`

StepperItemProps

Prop	Type	Default
`step`required One-based number of this step in the enclosing sequence.	`number`	`—`
`children`required Visible step label or content.	`JSX.Children`	`—`
`state` Overrides the derived completed/upcoming state, most commonly with `"error"`.	`JSX.ValueOrCell<StepperItemState \| undefined>`	`—`
`disabled` Whether this step is unavailable for interaction.	`JSX.ValueOrCell<boolean>`	`false`

Inspect the typed source →