Stepper

Stepper is a component that displays the progress of a multi-step process.

Import

import {
  Stepper,
  Step,
  StepTitle,
  StepDescription,
  StepSeparator,
  StepStatus,
  useSteps,
} from "@yamada-ui/react"

Copied!

Stepper: A wrapper component that controls child elements (Step).
Step: A component that displays a single step.
StepTitle: A component that displays the title of a step.
StepDescription: A component that displays the description of a step.
StepSeparator: A component that displays the separator between steps.
StepStatus: A component that displays the indicator for a step.
useSteps: A custom hook that manages the state of each step and the active index.

Usage

Define the information for each step in an array called steps, and set the initial index and the number of items in the steps array to useSteps.

Pass the activeStep returned from useSteps and the previously defined array steps to Stepper.

Editable example

const steps: Steps = [
  { title: "孫悟空少年編", description: "レッドリボン軍" },
  { title: "ピッコロ大魔王編", description: "ピッコロ大魔王" },
  { title: "サイヤ人編", description: "ベジータ・ナッパ" },
]

const { activeStep, onStepNext, onStepPrev } = useSteps({
  index: 1,
  count: steps.length,
})

return (
  <VStack>
    <Stepper index={activeStep} steps={steps} />

    <HStack>
      <Button onClick={onStepPrev}>Prev</Button>
      <Button onClick={onStepNext}>Next</Button>
    </HStack>
  </VStack>
)

Copied!

Change Size

Editable example

const steps: Steps = [
  { title: "孫悟空少年編", description: "レッドリボン軍" },
  { title: "ピッコロ大魔王編", description: "ピッコロ大魔王" },
  { title: "サイヤ人編", description: "ベジータ・ナッパ" },
]

return (
  <VStack>
    <Stepper size="sm" index={1} steps={steps} />

    <Stepper size="md" index={1} steps={steps} />

    <Stepper size="lg" index={1} steps={steps} />
  </VStack>
)

Copied!

Change Color Scheme

Editable example

const steps: Steps = [
  { title: "孫悟空少年編", description: "レッドリボン軍" },
  { title: "ピッコロ大魔王編", description: "ピッコロ大魔王" },
  { title: "サイヤ人編", description: "ベジータ・ナッパ" },
]

return (
  <VStack>
    <Stepper colorScheme="secondary" index={1} steps={steps} />

    <Stepper colorScheme="green" index={1} steps={steps} />
  </VStack>
)

Copied!

Change Orientation

By setting orientation to horizontal or vertical, you can change the orientation of the stepper.

Editable example

const steps: Steps = [
  { title: "孫悟空少年編", description: "レッドリボン軍" },
  { title: "ピッコロ大魔王編", description: "ピッコロ大魔王" },
  { title: "サイヤ人編", description: "ベジータ・ナッパ" },
]

const { activeStep, onStepNext, onStepPrev } = useSteps({
  index: 1,
  count: steps.length,
})

return (
  <VStack>
    <Stepper index={activeStep} steps={steps} orientation="horizontal" />

    <Stepper index={activeStep} steps={steps} orientation="vertical" h="sm" />

    <HStack>
      <Button onClick={onStepPrev}>Prev</Button>
      <Button onClick={onStepNext}>Next</Button>
    </HStack>
  </VStack>
)

Copied!

Customize Steps

Editable example

const steps: Steps = [
  { title: "孫悟空少年編", description: "レッドリボン軍" },
  { title: "ピッコロ大魔王編", description: "ピッコロ大魔王" },
  { title: "サイヤ人編", description: "ベジータ・ナッパ" },
]

const { activeStep, onStepNext, onStepPrev } = useSteps({
  index: 1,
  count: steps.length,
})

return (
  <VStack>
    <Stepper index={activeStep}>
      {steps.map(({ title, description }, index) => (
        <Step key={index}>
          <StepStatus />

          <Box flexShrink="0">
            <StepTitle>{title}</StepTitle>
            <StepDescription>{description}</StepDescription>
          </Box>

          <StepSeparator />
        </Step>
      ))}
    </Stepper>

    <HStack>
      <Button onClick={onStepPrev}>Prev</Button>
      <Button onClick={onStepNext}>Next</Button>
    </HStack>
  </VStack>
)

Copied!

Customize Indicators

To customize the indicators for each step, set the values for each status to statusProps or the StepStatus component.

complete: The indicator displayed for a completed step.
active: The indicator displayed for an active step.
incomplete: The indicator displayed for an incomplete step.

Editable example

const steps: Steps = [
  {
    title: "孫悟空少年編",
    description: "レッドリボン軍",
    statusProps: { complete: `😇`, incomplete: `😑`, active: `😎` },
  },
  {
    title: "ピッコロ大魔王編",
    description: "ピッコロ大魔王",
    statusProps: { complete: `😇`, incomplete: `😑`, active: `😎` },
  },
  {
    title: "サイヤ人編",
    description: "ベジータ・ナッパ",
    statusProps: { complete: `😇`, incomplete: `😑`, active: `😎` },
  },
]

const { activeStep, onStepNext, onStepPrev } = useSteps({
  index: 1,
  count: steps.length,
})

return (
  <VStack>
    <Stepper index={activeStep} steps={steps} />

    <HStack>
      <Button onClick={onStepPrev}>Prev</Button>
      <Button onClick={onStepNext}>Next</Button>
    </HStack>
  </VStack>
)

Copied!

Editable example

const steps: Steps = [
  {
    title: "孫悟空少年編",
    description: "レッドリボン軍",
  },
  {
    title: "ピッコロ大魔王編",
    description: "ピッコロ大魔王",
  },
  {
    title: "サイヤ人編",
    description: "ベジータ・ナッパ",
  },
]

const { activeStep, onStepNext, onStepPrev } = useSteps({
  index: 1,
  count: steps.length,
})

return (
  <VStack>
    <Stepper index={activeStep}>
      {steps.map(({ title, description }, index) => (
        <Step key={index}>
          <StepStatus complete={<GhostIcon />} />

          <Box flexShrink="0">
            <StepTitle>{title}</StepTitle>
            <StepDescription>{description}</StepDescription>
          </Box>

          <StepSeparator />
        </Step>
      ))}
    </Stepper>

    <HStack>
      <Button onClick={onStepPrev}>Prev</Button>
      <Button onClick={onStepNext}>Next</Button>
    </HStack>
  </VStack>
)

Copied!

Edit this page on GitHub

PreviousPagination NextDisclosure