Fluixi UI
GitHub ↗

Examples

Loading preview…

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. Steps can be display-only or, with clickable, navigable. Supports horizontal and vertical orientation.

Installation

pnpm add @fluixi-ui/stepper

Usage

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>

Props (Stepper)

Prop Type Default Description
step number — Controlled active step (0-based).
defaultStep number 0 Initial uncontrolled step.
onStepChange (s: number) => void — Called when the active step changes.
orientation 'horizontal' | 'vertical' 'horizontal' Layout direction.
clickable boolean false Allow clicking a step to navigate to it.

Parts

Part Description
Stepper The <ol> root. Owns the active step.
StepperItem A step; takes a 0-based index, exposes data-state.
StepperTrigger The clickable region; navigates when clickable, else disabled.
StepperIndicator The marker circle; render a number or 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.

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