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	StepperIndicatorState	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.