marigold-ui/marigold_2026

Stepper

Basic

draws no focus ring until a step is focused

shows a pointer cursor on a step that can be returned to

shows no pointer cursor on a step that is still ahead

draws the focus ring once a step has keyboard focus

States

Controlled

moves the current step when a completed step is activated

keeps the step ahead reachable after walking back

Many Steps

With Hrefs

routes through the RouterProvider instead of leaving the page

keeps the step ahead a link after routing back

activates a link step with Enter

Hide Labels

Multi Step Form

swaps the panel content when Continue is pressed

marks the step just left as completed

returns to an earlier step from the stepper itself

Validation Errors

marks the step as errored when its fields fail validation

shows the failing field its own message

clears the error and advances once the field is fixed

Chromatic publishes Storybook to streamline collaboration

Learn more Sign in