Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Stepper

A Stepper lets you visualize where a user is in a certain flow, and provides certain navigation capabilities.

FigmaGitHub

Code examples

() => {
const steps = [
  {
    title: "Step 1",
    description: "Step 1 description",
  },
  {
    title: "Step 2",
    description: "Step 2 description",
  },
  {
    title: "Step 3",
    description: "Step 3 description",
  },
]
return (
<Stepper 
  defaultStep={0} 
  size="lg" 
  variant="accent" 
  count={3} 
  width="100%"
>
  <StepperList>
    {steps.map((step, index) =>     
    <StepperItem index={index} showIndicator>
      {step.title}
    </StepperItem>)}
  </StepperList>
  {steps.map((step, index) =>     
    <StepperContent index={index} paddingY="4">
      {step.description}
    </StepperContent>)}
  <StepperCompletedContent paddingY="4">
    Congrats!
  </StepperCompletedContent>
  <ButtonGroup>
      <StepperPreviousTrigger > back </StepperPreviousTrigger>
      <StepperNextTrigger > next </StepperNextTrigger>
  </ButtonGroup>
</Stepper>
)
}

Guidelines

Stepper should be used to show where you are in a process.

A Stepper should be used when users can navigate between steps and control their progress through a process. It helps users understand where they are and allows them to move back and forth between steps.

A Progress Indicator, on the other hand, should be used when progress is controlled by the system rather than the user. For example, when a payment is being processed or a ticket is being booked, the system determines the progress and the user cannot influence the individual steps.

Code

<Stepper />

import { Stepper } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
activeStepnumberThe current step
disabledbooleanDisables all completed steps
headingstringHeading that's shown on smaller devices
headingLevel"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"The heading level of the heading that's shown on smaller devices. Defaults to h2.
onBackButtonClick(isFirstStep: boolean) => voidCallback for when the back button is clicked (on smaller devices)
onClick(step: number) => voidCallback for when a step is clicked directly (on larger devices)
stepsstring[]The label shown for each step
variant"core" | "accent"accent has a slightly tinted background