Components

SteppedForm

Multi-step form with progress tracking, validation, and navigation between steps.

import{ SteppedForm }from"oks-ui"

Step navigationProgress headerValidation per stepCustom header renderBack/next/submit labels

Basic

Define steps as an array of form step objects.

Interactive Playground

Controls

initialStep

headerVariant

disableHeaderNavigation

backLabel

nextLabel

submitLabel

Preview

Generated Code

<SteppedForm
  steps={[
    { key: "account", title: "Account", content: <p>Step 1</p> },
    { key: "profile", title: "Profile", content: <p>Step 2</p> },
    { key: "done", title: "Done", content: <p>Step 3</p> },
  ]}
  onSubmit={(data) => console.log(data)}
/>

Props

Prop	Type	Default	Description
steps	SteppedFormStep[]	—	Array of step definitions (required).
initialStep	number	0	Start at this step index.
onStepChange	(index: number) => void	—	Called on step navigation.
headerVariant	"numbers" \| "circles" \| "progress"	"numbers"	Step header style.
disableHeaderNavigation	boolean	false	Prevent clicking step headers.
backLabel	ReactNode	"Back"	Back button label.
nextLabel	ReactNode	"Next"	Next button label.
submitLabel	ReactNode	"Submit"	Submit button label.
classNames	{ base?: string; header?: string; body?: string; footer?: string }	—	Slot class overrides.

steps—

SteppedFormStep[]

Array of step definitions (required).

initialStep0

number

Start at this step index.

onStepChange—

(index: number) => void

Called on step navigation.

headerVariant"numbers"

"numbers" | "circles" | "progress"

Step header style.

disableHeaderNavigationfalse

boolean

Prevent clicking step headers.

backLabel"Back"

ReactNode

Back button label.

nextLabel"Next"

ReactNode

Next button label.

submitLabel"Submit"

ReactNode

Submit button label.

classNames—

{ base?: string; header?: string; body?: string; footer?: string }

Slot class overrides.