Components/Navigation/Stepper

Stepper

Navigation

Linear multi-step progress indicator.

Numbered step circles connected by lines. Active step shows Neo Green fill; completed steps show a checkmark; pending steps show Slate. Supports horizontal and vertical orientations. Clicking completed steps is opt-in via allowStepClick.

Usage

import { Stepper } from "nosible-ux"

const steps = [
  { label: "Select signals" },
  { label: "Configure alerts" },
  { label: "Review & publish" },
]

export default function Example() {
  return <Stepper steps={steps} value={1} />
}

Examples

Select signals

Choose signal sources

Configure alerts

Set thresholds

Review & publish

Go live

Vertical orientation

Data ingestion

RSS and API feeds connected

Signal extraction

NLP pipeline running

Alert dispatch

Webhooks and email configured

Accessibility

Step circles are button elements when allowStepClick is true. Each step has an implicit label from label and description. Completed steps have aria-label including "completed".

Props

Name	Type	Default	Description
`allowStepClick`	`boolean \| undefined`	`false`	When true, clicking completed steps allows navigation backward.
`defaultValue`	`number \| undefined`	`0`	Uncontrolled initial active step.
`onChange`	`((index: number) => void) \| undefined`	—	Callback fired when a step is clicked.
`orientation`	`"horizontal" \| "vertical" \| undefined`	`"horizontal"`	Layout direction.
`size`	`"sm" \| "md" \| "lg" \| undefined`	`"md"`	Visual size of the step circles.
`steps`	`StepProps[]`	—	Step definitions.
`value`	`number \| undefined`	`0`	0-indexed position of the active step.

← All Components Getting Started →