Components / navigation

Stepper

Shows progress through a multi-step flow.

import { Stepper } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Stepper } from '@basiiik/ui';

<Stepper steps={[{ label: 'Details' }, { label: 'Payment' }, { label: 'Review' }]} current={1} />

• Example values were filled in for the required props steps, current: replace them with your own.
• Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
• Data-driven: pass steps and the zero-based current index; earlier steps are complete, later ones upcoming, and a step with error shows the error status.
• Compose with: step.
• Storybook: Navigation/Stepper.

Props

Other props

States. Data-driven: pass steps and the zero-based current index; earlier steps are complete, later ones upcoming, and a step with error shows the error status.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Multi-step forms, checkout, onboarding and wizards

Do not use it when

• Sections of one page (use Tabs)
• A single determinate task (use Progress)

Rules for agents

• Pass steps as { label, description?, error? } data and current as the zero-based index of the current step
• Earlier steps show as complete and later ones as upcoming; set error on a step that has a problem
• Use orientation="vertical" on narrow screens or for long labels; the component does not switch by itself
• Keep to about 3 to 6 steps, and announce a step change by moving focus to the new page heading
• Pass aria-label when the default name "Progress" does not fit
• A horizontal stepper in a layout that can be narrow (a wizard in a card, a mobile screen) takes responsive, which stacks the steps below 480px of its own width; its parent must give it a width

Avoid

• A Stepper for sections of one page that can be visited in any order (use Tabs)
• More than about 6 steps; group them instead
• Showing a step as complete before its data is saved
• Making steps the only way to move between steps; keep Back and Next Buttons

Writing the content

• Step labels are short nouns: 'Details', 'Payment', 'Review'
• Use description only for one short supporting line
• Use sentence case

Keyboard

• Steps are not interactive by default; if they are links or buttons they follow normal Tab order

Accessibility

• aria-current="step" on the current step
• Connectors are decorative and hidden from assistive tech

Colour tokens it reads

Related

• Step
• Tabs
• Progress

navigation 2 Figma variants Try it in the live demo