Stepper
NavigationStable
Multi-step process indicator with navigation controls, validation gating, and horizontal/vertical orientation.
Quick Import
import { Stepper } from "@cohere-ai/waypoint-ui/stepper";Live Preview
Loading Stepper...
Props
| Name | Type | Default | Description |
|---|---|---|---|
value | number | - | Controlled active step |
defaultValue | number | - | Default active step |
onValueChange | function | - | Callback on step change |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction |
activationMode | 'automatic' | 'manual' | 'automatic' | How steps are activated |
onValidate | function | - | Gate function called before step change |
loop | boolean | false | Loop around at start/end |
nonInteractive | boolean | false | Disables direct step clicking |
value (StepperItem)* | number | - | Step number |
completed (StepperItem) | boolean | false | Marks step as completed |
* Required prop
Examples
Basic Stepper
Two-step form stepper with navigation
1 import { 2 Stepper, StepperList, StepperItem, StepperTrigger, 3 StepperIndicator, StepperContent, StepperNext, StepperPrev, 4 } from '@cohere-ai/waypoint-ui/stepper'; 5 6 <Stepper defaultValue={1}> 7 <StepperList> 8 <StepperItem value={1}> 9 <StepperTrigger> 10 <StepperIndicator>1</StepperIndicator> 11 </StepperTrigger> 12 Account 13 </StepperItem> 14 <StepperItem value={2}> 15 <StepperTrigger> 16 <StepperIndicator>2</StepperIndicator> 17 </StepperTrigger> 18 Profile 19 </StepperItem> 20 </StepperList> 21 <StepperContent value={1}>Step 1 content</StepperContent> 22 <StepperContent value={2}>Step 2 content</StepperContent> 23 <div className="flex gap-2"> 24 <StepperPrev>Previous</StepperPrev> 25 <StepperNext>Next</StepperNext> 26 </div> 27 </Stepper>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the Stepper component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.