Stepper

Last updated: 2.1.0 (30/01/2024) | Added: 2.1.0

The Stepper component system is useful for displaying a list or guide that a user can progress through.

Usage

import { Stepper, Text } from "@valence-ui/core";

function MyComponent() { 
    const [currentStep, setCurrentStep] = React.useState(0);

    return ( 
        <>
            <Stepper
                currentStep={currentStep}
            >
                <Stepper.Step>
                    <Text size="xl">
                        Step 1
                    </Text>
                </Stepper.Step>
                
                // Other steps
            </Stepper>
        </>
    )
}

The Stepper does not expose any way to internally control the current step, as it is expected this logic should be handled by the Stepper's children.


Props

StepperProps

Extends GenericProps.

Property
Type
Description

currentStep (required)

number

The current step to display.

variant

FillVariant

The fill variant to use for this stepper.

size

ComponentSize

The size of this stepper.

color

CSSProperties["color"]

The color of this stepper.

StepperIndicatorProps

Property
Type
Description

step (required)

number

The step number for this indicator.

state

The current state of this indicator.

variant

FillVariant

The fill variant to use for this indicator.

size

ComponentSize

The size of this indicator.

color

CSSProperties["color"]

The color of this indicator.

StepperIndicatorState

type StepperIndicatorState = "default" | "active" | "complete";

StepperStepProps

Extends FlexProps.

No unique props.

Last updated

Was this helpful?