Stepper

Position the list and items vertically for layouts such as tracking orders or timelines.

Validate inputs at each step dynamically before letting users navigate forward.

The wrapper component that holds the global state, validation handlers, and coordinates active steps.

A layout container that holds and manages keyboard tab focus between step triggers.

A wrapper for an individual step trigger and its subsequent separator.

An interactive trigger (button) used to navigate to a specific step.

A visual indicator displaying the step number or a completed checkmark. Can be customized with a callback.

A visual line divider connecting adjacent step indicators.

Text wrapper for the name/title of a step.

Text wrapper for secondary status/subtext explaining a step.

The container representing the active step's panel. Displays only when its value matches the current active step.

A convenience button to transition to the previous step in the sequence.

A convenience button to transition to the next step in the sequence, running step validation if defined.