Stepper Form

ProNew

A guided multistep form shell with gated progression, review states, and keyboard-accessible navigation.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/stepper-form

Prop	Type	Default	Description
`steps`	`StepperStep[]`	-	Ordered steps in the flow.
`value`	`number`	-	Controlled zero-based step index.
`defaultValue`	`number`	`0`	Initial step index when uncontrolled.
`onValueChange`	`(index: number) => void`	-	Called when the step changes.
`onComplete`	`() => void`	-	Called when the last step's action is chosen.
`completeLabel`	`string`	`"Complete"`	Label of the final action.

Also accepts all <div> props.

Field	Type	Description
`id`	`string`	Stable step id.
`title`	`string`	Short step title.
`description`	`string`	Optional supporting line.
`content`	`ReactNode`	Fields or content for this step.
`validate`	`() => boolean`	Return `false` to block moving forward.

Steps already reached stay clickable in the progress bar; steps further ahead are disabled until reached.
A failed validate shows an announced message under the step content.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/stepper-form

Prop	Type	Default	Description
`steps`	`StepperStep[]`	-	Ordered steps in the flow.
`value`	`number`	-	Controlled zero-based step index.
`defaultValue`	`number`	`0`	Initial step index when uncontrolled.
`onValueChange`	`(index: number) => void`	-	Called when the step changes.
`onComplete`	`() => void`	-	Called when the last step's action is chosen.
`completeLabel`	`string`	`"Complete"`	Label of the final action.

Also accepts all <div> props.

Field	Type	Description
`id`	`string`	Stable step id.
`title`	`string`	Short step title.
`description`	`string`	Optional supporting line.
`content`	`ReactNode`	Fields or content for this step.
`validate`	`() => boolean`	Return `false` to block moving forward.

Steps already reached stay clickable in the progress bar; steps further ahead are disabled until reached.
A failed validate shows an announced message under the step content.