Stepper
Progress through named steps, from one value
Create a workspace
Create a workspace
- 1WorkspaceName and handle
- 2SeatsHow many people
- 3ReviewCreate it
The name your team sees.
Give the workspace a name
step=1/3 value=1 status=current,upcoming,upcoming refusals=0
Installation
npx shadcn@latest add @sudokw/components-stepperimport { Stepper } from "@gpuixui/components";Usage
import { Stepper, StepperStep } from "@gpuixui/components";
<Stepper label="Checkout" value={2}>
<StepperStep description="Email and password" label="Account" value={1} />
<StepperStep description="Card and address" label="Billing" value={2} />
<StepperStep label="Review" value={3} />
</Stepper>;Composition
Stepper
└── StepperStepAPI reference
Stepper
| Prop | Type | Default | Consequence |
|---|---|---|---|
value | number | — | the current step, 1-based; steps below it are complete |
orientation | "horizontal" | "vertical" | "horizontal" — a stored name the union does not carry | a row of steps, or a column for a sidebar |
label | string | none | the list's accessible name (aria-label) |
children | ReactNode | — | StepperStep parts, in order |
style | StyleDesc | — | merged last |
className | string | — | joined last |
testId | string | — | stable locator |
StepperStep
| Prop | Type | Default | Consequence |
|---|---|---|---|
value | number | — | this step's position, 1-based, on the root's scale |
label | string | — | the step's name and its accessible name |
description | string | none | support copy under the name |
style | StateStyle<StepperStepState> | — | merged last |
className | string | — | joined last |
testId | string | — | stable locator |
Edit this page on GitHubapps/docs/content/docs/components/stepper.mdx