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
countnumbertotal number of steps
defaultStepnumber
isStepValidfunction(index: number) => boolean Whether a step is valid. Invalid steps block forward navigation in linear mode.
linearbooleanIf `true`, the stepper requires the user to complete the steps in order
onStepChangefunctionCallback to be called when the step-value changes
onStepCompletefunctionCallback to be called when a step is completed
onStepInvalidfunction(details: StepInvalidDetails) => void Called when navigation is blocked due to an invalid step
sizemd | lg
stepnumbercurrent step
variant"core" | "accent"accent has a slightly tinted background

<StepperItem />

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

Props

Name
Type
Required?
Description
indexbooleanthe step index
showIndicatorbooleandefault false. Shows step number if set to true.

<StepperContent />

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

Props

Name
Type
Required?
Description
indexnumber