@fluixi-ui/stepper

An ordered progress indicator across a sequence of steps.

A headless stepper. The root owns the active step; each item derives its state (complete, active, or incomplete) from its index and exposes it as data-state for styling.

import { createSignal } from '@fluixi/reactive/signal';
import {
  Stepper,
  StepperItem,
  StepperTrigger,
  StepperIndicator,
  StepperTitle,
  StepperDescription,
  StepperSeparator,
} from '@fluixi-ui/stepper';

const [active, setActive] = createSignal(0);

<Stepper step={active()} onStepChange={setActive} clickable>
  <StepperItem index={0}>
    <StepperTrigger>
      <StepperIndicator>1</StepperIndicator>
      <StepperTitle>Account</StepperTitle>
    </StepperTrigger>
    <StepperSeparator />
  </StepperItem>
  <StepperItem index={1}>
    <StepperTrigger>
      <StepperIndicator>2</StepperIndicator>
      <StepperTitle>Billing</StepperTitle>
    </StepperTrigger>
  </StepperItem>
</Stepper>

Parts

• Stepper — the <ol> root. Owns the active step. Props: step / defaultStep / onStepChange, orientation (horizontal | vertical), clickable.
• StepperItem — a step; takes a 0-based index, exposes data-state.
• StepperTrigger — the clickable region; navigates when clickable, else a disabled button. Carries aria-current="step" when active.
• StepperIndicator — the marker circle; render a number or a per-state icon inside.
• StepperTitle / StepperDescription — the step's label and supporting text.
• StepperSeparator — the connector to the next step; reflects its item's state.

All parts forward class, style, and other props to the underlying element.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.