Stepper

PreviousNext

Multi-step wizard indicator.

import { Stepper, Step, StepLabel } from "@/rl-ui";

<Stepper activeStep={1}>
<Step><StepLabel>Basics</StepLabel></Step>
<Step><StepLabel>Team</StepLabel></Step>
<Step><StepLabel>Review</StepLabel></Step>
</Stepper>

Examples

Vertical

import { Stepper, Step, StepLabel } from "@/rl-ui";

<Stepper activeStep={0} orientation="vertical">
<Step><StepLabel>Basics</StepLabel></Step>
<Step><StepLabel>Team</StepLabel></Step>
<Step><StepLabel>Review</StepLabel></Step>
</Stepper>

Alternative label

import { Stepper, Step, StepLabel } from "@/rl-ui";

<Stepper activeStep={2} alternativeLabel>
<Step><StepLabel>Basics</StepLabel></Step>
<Step><StepLabel>Team</StepLabel></Step>
<Step><StepLabel>Review</StepLabel></Step>
</Stepper>

API

PropTypeDefaultDescription
activeStepnumber0Zero-based active step index.
orientation"horizontal" | "vertical""horizontal"Layout orientation.
alternativeLabelbooleanfalsePlace labels under icons (horizontal).