Stepper Controlled 1 - Controlled value

Pro

Controlled stepper using value and onValueChange with external step buttons.

Shadcn Stepper Controlled 1 component

Component data

ID
stepper/stepper-controlled-1
Access
pro
Created
Jul 30, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Stepper Controlled 1 component design & features

This example controls the active step with value and onValueChange, driving the stepper from external Back and Continue buttons.

Controlled steppers are useful when step changes must sync with router state, analytics, or parent form logic.