Components
Stepper
Stepper
Multi-step progress - onboarding, checkout, wizards. Steps are plain maps; three arrangements.
Steps from plain maps
Multi-step progress for onboarding, checkout, wizards. Steps are plain maps - name, description, complete?, active?, and an optional on_click JS command to make them jump targets. aria-current and completed labels are wired for screen readers.
<.stepper steps={[
%{name: "Account", description: "Email and password", complete?: true, active?: false},
%{name: "Workspace", description: "Name your project", complete?: false, active?: true},
%{name: "Invite", description: "Bring the team", complete?: false, active?: false},
%{name: "Review", description: "Confirm and finish", complete?: false, active?: false}
]} />
Labels underneath
label_placement="bottom" is the classic wizard look - circles in a row, labels centred underneath, connectors pinned to the circle centres. Horizontal only; the stacked mobile layout is unchanged.
<.stepper
label_placement="bottom"
steps={[
%{name: "Cart", complete?: true, active?: false},
%{name: "Shipping", complete?: true, active?: false},
%{name: "Payment", complete?: false, active?: true},
%{name: "Confirm", complete?: false, active?: false}
]}
/>
Vertical
orientation="vertical" runs the rail down the side - the settings-checklist and deploy-pipeline arrangement, with descriptions beside each circle.
<.stepper
orientation="vertical"
steps={[
%{
name: "Repository connected",
description: "GitHub app installed",
complete?: true,
active?: false
},
%{name: "First deploy", description: "Build and release", complete?: false, active?: true},
%{
name: "Custom domain",
description: "DNS and certificates",
complete?: false,
active?: false
}
]}
/>
Properties
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
string |
""
|
|
label_placement
|
string |
"beside"
|
horizontal only: bottom centres the labels under the circles (the classic wizard look); ignored when vertical, where labels always sit beside
one of: "beside", "bottom"
|
orientation
|
string |
"horizontal"
|
one of: "horizontal", "vertical"
|
size
|
string |
"md"
|
one of: "sm", "md", "lg"
|
steps*
|
list |