A multi-step wizard for guiding users through sequential tasks.
import { Steps } from '@oztix/roadie-components/steps'
A horizontal stepper with three steps. Click a step trigger to navigate.
Use the direction prop to switch between horizontal and vertical layouts.
Use linear to restrict navigation to sequential order. In linear mode, users cannot click ahead. Only the next step is reachable.
Set invalid on a Steps.Item to show a danger state on its indicator and
text. Use this when a step has validation errors that prevent progression.
When a completed step is invalid, the check icon is replaced with the step number.
Steps is a compound component. Use Steps.List, Steps.Item, Steps.Trigger, Steps.Indicator, Steps.Separator, Steps.Content, and Steps.CompletedContent to build the stepper.
Use Steps.Progress to show a fill bar based on completion percentage.
Use Steps.NextTrigger and Steps.PrevTrigger with asChild to compose with Roadie Button.
Use Steps.RootProvider with the useSteps hook for external state control.
Enter or Space activates a trigger.role="tablist", triggers as role="tab", content panels as role="tabpanel". aria-selected marks the active trigger. aria-controls links triggers to panels.aria-selected. Disabled triggers in linear mode receive aria-disabled.function useSteps(props?: UseStepsProps): UseStepsReturn
Ark UI's stepper state, re-exported so Steps.RootProvider can take a value
you control. props takes the same step / defaultStep / onStepChange /
linear / count / orientation as Steps itself. The fields most calls
reach for:
| Field | Type | Description |
|---|---|---|
value | number | The current step index. |
count | number | The total number of steps. |
hasNextStep | boolean | Whether there is a step after this one. |
hasPrevStep | boolean | Whether there is a step before this one. |
isCompleted | boolean | Whether the stepper has finished. |
setStep | (step: number) => void | Jump to a step. |
goToNextStep | () => void | Advance one step. |
goToPrevStep | () => void | Go back one step. |
resetStep | () => void | Return to the first step. |
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.