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 (
    <Stepper
      step={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%">
        <Button
          label="Back"
          onClick={back}
          isDisabled={step === 0}
          variant="ghost"
        />
        <Spacer />
        <Button
          label="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>
            <Button
              label="Next"
              onClick={next}
              isDisabled={step >= 3}
              colorScheme="primary"
            />
          </ButtonGroup>
        </>
      ),
    },
    {
      name: 'step 2',
      title: 'Second step',
      children: (
        <>
          <Box py="4">Content step 2</Box>{' '}
          <ButtonGroup>
            <Button
              label="Next"
              onClick={next}
              isDisabled={step >= 3}
              colorScheme="primary"
            />
            <Button
              label="Back"
              onClick={back}
              isDisabled={step === 0}
              variant="ghost"
            />
          </ButtonGroup>
        </>
      ),
    },
    {
      name: 'step 3',
      title: 'Third step',
      children: (
        <>
          <Box py="4">Content step 3</Box>
          <ButtonGroup>
            <Button
              label="Next"
              onClick={next}
              isDisabled={step >= 3}
              colorScheme="primary"
            />
            <Button
              label="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

Type
boolean

onChange

Type
((index: number) => void)

step

Type
string | number

StepperStep props#

titlerequired

Description

The step title

Type
ReactNode

icon

Description

Show an icon instead of the step number

Type
ReactNode

isActive

Type
boolean

isCompleted

Type
boolean

name

Description

The step name, used for controlled steppers

Type
string

StepperCompleted props#

StepperCompleted accepts all Box props.

Was this helpful?