Stepper
A multi-step navigation component that guides users through a sequence of related actions. Perfect for forms, wizards and complex workflows.
Import
import { Stepper, StepperItem } from "@sparrowengg/twigs-react";Usage
const StepperExample = () => {
const [activeStep, setActiveStep] = useState(0);
return (
<Box css={{ display: "flex", flexDirection: "column", gap: "$4" }}>
<Text css={{ fontSize: "$md", fontWeight: "$6" }}>Basic Stepper</Text>
<Stepper activeStep={activeStep} onChange={setActiveStep}>
<StepperItem label="Registration">Step 1</StepperItem>
<StepperItem label="Account settings">Step 2</StepperItem>
<StepperItem label="Confirm">Step 3</StepperItem>
</Stepper>
</Box>
);
};Examples
Stepper customizations
The stepper component supports various customization options including custom components, different step states, and advanced styling.
Component Customization Best Practice
When customizing stepper components using the components prop, it's recommended to render each component as a separate function outside the main component. This approach provides better performance, cleaner code organization, and proper state handling.
Instead of inline component definitions, create dedicated functions like renderedContainer, renderedStepper, and renderedStep to ensure optimal re-rendering behavior and maintainability.
Props
Stepper
| Prop | Type | Default |
|---|---|---|
activeStep? | number | 0 |
onChange? | (step: number) => void | - |
children? | ReactElement[] | - |
components? | Object | - |
css? | object | - |
StepperItem
| Prop | Type | Default |
|---|---|---|
label? | string | - |
allowClick? | boolean | true |
children? | ReactNode | - |