Navigation
Multi-step form flow with progress tracking, built on FormFieldSet.
2 options across 2 groups
| Prop | Type | Default | Description |
|---|---|---|---|
steps | SteppedFormStep[] | — | Ordered step definitions: { key, title, description?, fields?, content, isOptional? } (required). |
backLabel / nextLabel / submitLabel | ReactNode | "Back" / "Next" / "Submit" | Footer action button labels. |
steps
SteppedFormStep[]
Default: —
Ordered step definitions: { key, title, description?, fields?, content, isOptional? } (required).
backLabel / nextLabel / submitLabel
ReactNode
Default: "Back" / "Next" / "Submit"
Footer action button labels.
| Prop | Type | Default | Description |
|---|---|---|---|
headerVariant | "dots" | "progress" | "tabs" | "none" | "dots" | Built-in step-header style. |
headerVariant
"dots" | "progress" | "tabs" | "none"
Default: "dots"
Built-in step-header style.
| Prop | Type | Default | Description |
|---|---|---|---|
initialStep | number | 0 | Uncontrolled initial step index. |
stepIndex | number | — | Controlled current step index. |
disableHeaderNavigation | boolean | false | Prevents jumping steps by clicking the header. |
renderHeader | (args) => ReactNode | — | Fully custom header renderer, replacing headerVariant. |
renderStepHeaderItem | (args) => ReactNode | — | Custom renderer for a single step-header item. |
validationMode / showErrorsOn / initialValues / ... | see Form props | see Form | All other Form props are inherited (steps replaces children). |
initialStep
number
Default: 0
Uncontrolled initial step index.
stepIndex
number
Default: —
Controlled current step index.
disableHeaderNavigation
boolean
Default: false
Prevents jumping steps by clicking the header.
renderHeader
(args) => ReactNode
Default: —
Fully custom header renderer, replacing headerVariant.
renderStepHeaderItem
(args) => ReactNode
Default: —
Custom renderer for a single step-header item.
validationMode / showErrorsOn / initialValues / ...
see Form props
Default: see Form
All other Form props are inherited (steps replaces children).
| Prop | Type | Default | Description |
|---|---|---|---|
onStepChange | (nextIndex: number) => void | — | Called when the active step changes. |
onSubmit | (formData: FormData) => void | Promise<void> | — | Inherited from Form — called on final-step submit (required). |
onStepChange
(nextIndex: number) => void
Default: —
Called when the active step changes.
onSubmit
(formData: FormData) => void | Promise<void>
Default: —
Inherited from Form — called on final-step submit (required).
| Prop | Type | Default | Description |
|---|---|---|---|
classNames | Partial<Record<SteppedFormSlot, string>> | — | Per-slot class overrides (11 slots: base/header/steps/stepButton/stepDot/stepLabel/stepDescription/progress/progressTrack/progressIndicator/content/footer/actions). |
className | string | — | Class applied to the root element. |
style | CSSProperties | — | Inline styles for the root element. |
classNames
Partial<Record<SteppedFormSlot, string>>
Default: —
Per-slot class overrides (11 slots: base/header/steps/stepButton/stepDot/stepLabel/stepDescription/progress/progressTrack/progressIndicator/content/footer/actions).
className
string
Default: —
Class applied to the root element.
style
CSSProperties
Default: —
Inline styles for the root element.
