boolean
Stepper
Indicate progress through numbered steps in multi-step workflows.
Import#
Stepper
: The wrapper component provides context and state management.StepperSteps
: Manages redering of steps and completed states.StepperStep
: The form step rendering an icon and a title.StepperCompleted
: The completed content.
import {Stepper,StepperSteps,StepperStep,StepperCompleted,} from '@saas-ui/react'
Usage#
Basic#
<Stepper step={1}><StepperStep title="Personal information" /><StepperStep title="Account" /><StepperStep title="Confirmation" /></Stepper>
Vertical#
<Stepper step={1} orientation="vertical"><StepperStep title="Personal information" /><StepperStep title="Account" /><StepperStep title="Confirmation" /></Stepper>
Variants#
Outline#
<Stepper step={1} variant="outline"><StepperStep title="Personal information" /><StepperStep title="Account" /><StepperStep title="Confirmation" /></Stepper>
Solid#
<Stepper step={1} variant="solid"><StepperStep title="Personal information" /><StepperStep title="Account" /><StepperStep title="Confirmation" /></Stepper>
Subtle#
<Stepper step={1} variant="subtle"><StepperStep title="Personal information" /><StepperStep title="Account" /><StepperStep title="Confirmation" /></Stepper>
Custom icons#
<Stepper step={0} variant="subtle"><StepperStep title="Personal information" icon={<FiUsers />} /><StepperStep title="Account" icon={<FiLock />} /><StepperStep title="Confirmation" icon={<FiCheck />} /></Stepper>
Responsive Mobile stepper#
Horizontal steppers will position titles below the step icon on smaller screens. If you have more then 3 steps it's recommended to use a vertical stepper instead.
function ResponsiveStepper() {return (<Stepperstep={1}orientation={useBreakpointValue({ base: 'vertical', md: 'horizontal' })}><StepperStep title="Personal information" /><StepperStep title="Account" /><StepperStep title="Confirmation" /></Stepper>)}
With content#
function WithContent() {const [step, setStep] = React.useState(0)const back = () => {setStep(step - 1)}const next = () => {setStep(step + 1)}const steps = [{name: 'step 1',title: 'First step',children: <Box py="4">Content step 1</Box>,},{name: 'step 2',title: 'Second step',children: <Box py="4">Content step 2</Box>,},{name: 'step 3',title: 'Third step',children: <Box py="4">Content step 3</Box>,},]return (<><Stepper step={step} mb="2">{steps.map((args, i) => (<StepperStep key={i} {...args} />))}<StepperCompleted py="4">Completed</StepperCompleted></Stepper><ButtonGroup width="100%"><Buttonlabel="Back"onClick={back}isDisabled={step === 0}variant="ghost"/><Spacer /><Buttonlabel="Next"onClick={next}isDisabled={step >= 3}colorScheme="primary"/></ButtonGroup></>)}
With Vertical Content#
function VerticalContent() {const [step, setStep] = React.useState(0)const back = () => {setStep(step - 1)}const next = () => {setStep(step + 1)}const steps = [{name: 'step 1',title: 'First step',children: (<><Box py="4">Content step 1</Box><ButtonGroup><Buttonlabel="Next"onClick={next}isDisabled={step >= 3}colorScheme="primary"/></ButtonGroup></>),},{name: 'step 2',title: 'Second step',children: (<><Box py="4">Content step 2</Box>{' '}<ButtonGroup><Buttonlabel="Next"onClick={next}isDisabled={step >= 3}colorScheme="primary"/><Buttonlabel="Back"onClick={back}isDisabled={step === 0}variant="ghost"/></ButtonGroup></>),},{name: 'step 3',title: 'Third step',children: (<><Box py="4">Content step 3</Box><ButtonGroup><Buttonlabel="Next"onClick={next}isDisabled={step >= 3}colorScheme="primary"/><Buttonlabel="Back"onClick={back}isDisabled={step === 0}variant="ghost"/></ButtonGroup></>),},]return (<><Stepper step={step} mb="2" orientation="vertical">{steps.map((args, i) => (<StepperStep key={i} {...args} />))}<StepperCompleted py="4">Completed</StepperCompleted></Stepper></>)}
Props#
Stepper props#
isCompleted
isCompleted
Type
onChange
onChange
Type
((index: number) => void)
step
step
Type
string | number
StepperStep props#
title
required
title
required
Description
The step title
Type
ReactNode
icon
icon
Description
Show an icon instead of the step number
Type
ReactNode
isActive
isActive
Type
boolean
isCompleted
isCompleted
Type
boolean
name
name
Description
The step name, used for controlled steppers
Type
string
StepperCompleted props#
StepperCompleted
accepts all Box
props.
Was this helpful?