Data display

Stepper

Where the user is in a multi-step flow.

Client componentSource

Import

import { Stepper } from '@the_viveksingh/vivek-ui'

Progress through a flow

Status is conveyed by a visually hidden label as well as by colour and glyph, so "current" survives being read aloud or seen in greyscale.

<Stepper
  steps={[
    { label: 'Account', description: 'Email and password' },
    { label: 'Workspace', description: 'Name and region' },
    { label: 'Billing', description: 'Card or invoice' },
    { label: 'Done', description: 'Invite your team' },
  ]}
  activeStep={2}
  label="Onboarding"
/>

Vertical

<Stepper steps={steps} activeStep={1} orientation="vertical" label="Onboarding" />

Plain strings

When there is nothing to say beyond the name.

<Stepper steps={['Cart', 'Address', 'Payment']} activeStep={1} size="sm" />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Stepper
PropTypeDefaultDescription
stepsreadonly (Step | string)[]—A bare string is shorthand for `{ label }`.
activeStepnumber—Controlled index. Pair with `onStepChange`.
defaultActiveStepnumber—Initial index while uncontrolled. Defaults to `0`.
orientationStepperOrientation——
onStepChange(index: number) => void—Called with the index the user asked for, in both controlled and uncontrolled mode.
clickableboolean—Render each step as a button. Without this the stepper is a read-only indicator.
size'sm' | 'md' | 'lg'——
labelstring—Accessible name of the navigation landmark. Defaults to `'Progress'`.
statusLabelsPartial<Record<StepStatus, string>>—Override the announced status words, e.g. for another language.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering