Biofarma | Bind UI

Wizard/Stepper

Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Step 1
Description of step 1
2
Step 2
Description of step 2
3
Step 3
Description of step 3

Step 2

Please completed this process to continue next step

Your Name

Usage

import { Stepper } from 'bio-bind-ui';

<Stepper
  currentStepIndex={1}
  direction='horizontal'
  labelContainerStyle={{
    width: 75,
  }}
  mode='light'
  stepItems={[
    {
      label: 'Step 1',
      subLabel: 'Description of step 1',
    },
    {
      label: 'Step 2',
      subLabel: 'Description of step 2',
    },
    {
      label: 'Step 3',
      subLabel: 'Description of step 3',
    },
  ]}
  style={{
    width: 400,
  }}
/>

Example

Direction

Set the direction prop to horizontal or vertical.

Step 1
Description of step 1

2
Step 2
Description of step 2

3
Step 3
Description of step 3

Step 2

Please completed this process to continue next step

Your Name

Gap Line (optional)

Set the isSeparated prop to true to create gap between line and stepper item.

1
Step 1
Description of step 1
2
Step 2
Description of step 2
3
Step 3
Description of step 3

Step 2

Please completed this process to continue next step

Your Name

Mode (optional)

Use mode to use dark or light

Step 1
Description of step 1
2
Step 2
Description of step 2
3
Step 3
Description of step 3

Step 2

Please completed this process to continue next step

Your Name

Props

Props	Required	Default	Type	description
direction	false	`horizontal`	`horizontal` `vertical`	The direction of stepper `horizontal` or `vertical`.
style	false	-	`CSSProperties`	Custom styles for the stepper component.
mode	false	`light`	`light` `dark`	The theme mode of the stepper (`light` or `dark`).
isSeparated	false	`false`	`true` `false`	Separated line to the stepper items.
labelContainerStyle	false	-	`CSSProperties`	Custom styles for label container setting.
currentStepIndex	false	-	`number`	The current active stepper.
stepItems	false	`[]`	`Array<{ label: string, subLabel: string, iconStep: React.ReactNode; }>`	The list of stepper items containing a label, sub label or icon for the stepper.
iconCompletedStep	false	-	`React.ReactNode`	Icon for each of stepper items is completed

Sidebar Table