Stepper

    Import#

    import { Stepper } from '@incmix/ui'

    Usage#

    Basic#

    1

    Personal information

    2

    Account

    3

    Confirmation

    <Stepper step={1}>
      <StepperStep title="Personal information" />
      <StepperStep title="Account" />
      <StepperStep title="Confirmation" />
    </Stepper>

    Vertical#

    1

    Personal information

    2

    Account

    3

    Confirmation

    <Stepper step={1} orientation="vertical">
      <StepperStep title="Personal information" />
      <StepperStep title="Account" />
      <StepperStep title="Confirmation" />
    </Stepper>

    Variants#

    Outline#

    1

    Personal information

    2

    Account

    3

    Confirmation

    <Stepper step={1} variant="outline">
      <StepperStep title="Personal information" />
      <StepperStep title="Account" />
      <StepperStep title="Confirmation" />
    </Stepper>

    Solid#

    1

    Personal information

    2

    Account

    3

    Confirmation

    <Stepper step={1} variant="solid">
      <StepperStep title="Personal information" />
      <StepperStep title="Account" />
      <StepperStep title="Confirmation" />
    </Stepper>

    Subtle#

    1

    Personal information

    2

    Account

    3

    Confirmation

    <Stepper step={0} variant="subtle">
      <StepperStep title="Personal information" />
      <StepperStep title="Account" />
      <StepperStep title="Confirmation" />
    </Stepper>

    Custom Icons#

    Personal information

    Account

    Confirmation

    <Stepper step={0}>
      <StepperStep title="Personal information" icon={<FiUser />} />
      <StepperStep title="Account" icon={<FiLock />} />
      <StepperStep title="Confirmation" icon={<FiCheck />} />
    </Stepper>

    Mobile Responsive Stepper#

    Horizontal Stepper will position its title below Stepper Icon for smaller screen size. If you have more than 3 step we recommend using vertical stepper.

    You can conditionally set value of orientation prop to horizontal or vertical depending on screen size.

    1

    Personal information

    2

    Account

    3

    Confirmation

    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#

    1

    First step

    2

    Second step

    3

    Third step

    function WithContent() {
      const [step, setStep] = 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>
        </>
      )
    }

    Width Vertical Content#

    1

    First step

    2

    Second step

    3

    Third step

    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>
        </>
      )
    }
    Edit this page on GitHub