Anex UI logoAnex UI
npm install anexui
Documentation

Documentation

Stepper

A multi-step progress indicator — horizontal or vertical — with aria-current="step".

Preview

  1. AccountCreate your account
  2. ProfileSet up your profile
  3. ReviewConfirm details

Usage

import { Stepper } from "anexui";

const steps = [
  { id: "account", label: "Account", description: "Create your account" },
  { id: "profile", label: "Profile", description: "Set up your profile" },
  { id: "billing", label: "Billing", description: "Add payment method" },
  { id: "confirm", label: "Confirm", description: "Review and submit" },
];

<Stepper steps={steps} activeStep={1} />
Copy code

Vertical orientation

<Stepper steps={steps} activeStep={2} orientation="vertical" />
Copy code

Controlled stepper

import { useState } from "react";
import { Stepper } from "anexui";

function Example() {
  const [active, setActive] = useState(0);
  return (
    <div>
      <Stepper steps={steps} activeStep={active} />
      <div style={{ marginTop: 16 }}>
        <Button onClick={() => setActive(a => Math.max(0, a - 1))}>Back</Button>
        <Button onClick={() => setActive(a => Math.min(steps.length - 1, a + 1))}>Next</Button>
      </div>
    </div>
  );
}
Copy code

Step object

| Field | Type | Description | |---|---|---| | id | string | Required. Unique identifier | | label | string | Required. Step title | | description | string | Optional subtitle below the label |

Props

| Prop | Type | Default | Description | |---|---|---|---| | steps | Step[] | — | Required. Ordered list of steps | | activeStep | number | 0 | 0-based index of the current step | | orientation | "horizontal" \| "vertical" | "horizontal" | Layout direction |

Accessibility