Stepper

Used to guide users through a series of steps in a process.

Demo

React

1Step A

Step A

2Step B

Step B

3Step C

Step C

All steps complete

BackNext

Vue

1 Step A

Step A

2 Step B

Step B

3 Step C

Step C

All steps complete

BackNext

Usage

React

import { Stepper } from '@fintech-sandpit/ui/react';

return (
  <Stepper.Root count={3}>
    <Stepper.List>
      <Stepper.Item index={1}>
        <Stepper.Trigger>
          <Stepper.Indicator>
            1
          </Stepper.Indicator>

          Step A
        </Stepper.Trigger>

        <Stepper.Separator />
      </Stepper.Item>

      <Stepper.Item index={2}>
        <Stepper.Trigger>
          <Stepper.Indicator>
            2
          </Stepper.Indicator>

          Step B
        </Stepper.Trigger>

        <Stepper.Separator />
      </Stepper.Item>

      <Stepper.Item index={3}>
        <Stepper.Trigger>
          <Stepper.Indicator>
            3
          </Stepper.Indicator>

          Step C
        </Stepper.Trigger>

        <Stepper.Separator />
      </Stepper.Item>
    </Stepper.List>

    <Stepper.Content index={1}>
      Step A
    </Stepper.Content>

    <Stepper.Content index={2}>
      Step B
    </Stepper.Content>

    <Stepper.Content index={3}>
      Step C
    </Stepper.Content>

    <Stepper.CompletedContent>
      All Steps Complete
    </Stepper.CompletedContent>

    <Stepper.PrevTrigger>Back</Stepper.PrevTrigger>

    <Stepper.NextTrigger>Next</Stepper.NextTrigger>
  </Stepper.Root>
);

Vue

<script setup lang="ts">
import { Stepper } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Stepper.Root :count="3">
    <Stepper.List>
      <Stepper.Item :index="1">
        <Stepper.Trigger>
          <Stepper.Indicator>
            1
          </Stepper.Indicator>

          Step A
        </Stepper.Trigger>

        <Stepper.Separator />
      </Stepper.Item>

      <Stepper.Item :index="2">
        <Stepper.Trigger>
          <Stepper.Indicator>
            2
          </Stepper.Indicator>

          Step B
        </Stepper.Trigger>

        <Stepper.Separator />
      </Stepper.Item>

      <Stepper.Item :index="3">
        <Stepper.Trigger>
          <Stepper.Indicator>
            3
          </Stepper.Indicator>

          Step C
        </Stepper.Trigger>

        <Stepper.Separator />
      </Stepper.Item>
    </Stepper.List>

    <Stepper.Content :index="1">
      Step A
    </Stepper.Content>

    <Stepper.Content :index="2">
      Step B
    </Stepper.Content>

    <Stepper.Content :index="3">
      Step C
    </Stepper.Content>

    <Stepper.CompletedContent>
      All Steps Complete
    </Stepper.CompletedContent>

    <Stepper.PrevTrigger>Back</Stepper.PrevTrigger>

    <Stepper.NextTrigger>Next</Stepper.NextTrigger>
  </Stepper.Root>
</template>

Props

Stepper Root Props

React

Name	Type	Required	Default	Description
count	number	Yes	—	A number of steps
defaultStep	number		—	Default step index
step	number		—	Controlled step index
orientation	StepperOrientation		horizontal	Stepper orientation
linear	boolean		—	If true, the stepper requires the user to complete each step in order

Vue

Name	Type	Required	Default	Description
count	number	Yes	—	A number of steps
default-step	number		—	Default step index
step	number		—	Controlled step index
orientation	StepperOrientation		horizontal	Stepper orientation
linear	boolean		—	If true, the stepper requires the user to complete each step in order

Stepper Item Props

Name	Type	Required	Default	Description
index	number	Yes	—	Index of the step

Stepper Content Props

Name	Type	Required	Default	Description
index	number	Yes	—	Index of the step content

Types

type StepperOrientation = 'horizontal' | 'vertical'