Stepper
Step-by-step navigation interface, perfect for multi-step forms, wizards, and progress tracking.
Source
LLM docs
Package
Examples
7
Properties
39
Playground
Basics
Control the active step with local state and show completion messaging once the flow finishes.
Loading demo…
import { useState } from 'react';
import { Block, Button, Row, Stepper } from '@plocks/ui';
export function Demo() {
const [active, setActive] = useState(1);
return (
<Block fullWidth>
<Stepper active={active} onStepClick={setActive}>
<Stepper.Step label="Account" description="Create your credentials">
Set up your sign-in information.
</Stepper.Step>
<Stepper.Step label="Verification" description="Confirm your email">
Check your inbox for a verification link.
</Stepper.Step>
<Stepper.Step label="Preferences" description="Adjust defaults">
Choose your notification defaults.
</Stepper.Step>
<Stepper.Completed>All steps complete.</Stepper.Completed>
</Stepper>
<Row gap="sm" justify="space-between">
<Button variant="outline" onPress={() => setActive(active - 1)} disabled={active === 0}>
Back
</Button>
<Button onPress={() => setActive(active + 1)} disabled={active === 3}>
Next
</Button>
</Row>
</Block>
);
}Disable Step Selection
Set
allowStepSelect={false} to stop a step from being selected by click. Here, Preferences can't be clicked.Loading demo…
import { useState } from 'react';
import { Block, Stepper } from '@plocks/ui';
export function Demo() {
const [active, setActive] = useState(0);
return (
<Block fullWidth>
<Stepper active={active} onStepClick={setActive}>
<Stepper.Step label="Account" />
<Stepper.Step label="Verification" />
<Stepper.Step label="Preferences" allowStepSelect={false} />
</Stepper>
</Block>
);
}Icon Overrides
Swap icons for both active steps and the completed state to reinforce the status of each milestone.
Loading demo…
import { Block, Icon, Stepper } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Stepper active={1} completedIcon={<Icon name="check" />}>
<Stepper.Step label="Account" icon={<Icon name="user" />} />
<Stepper.Step label="Verification" icon={<Icon name="mail" />} />
<Stepper.Step label="Preferences" icon={<Icon name="settings" />} />
</Stepper>
</Block>
);
}Step Colors
Give each step its own
color to override the stepper's accent color.Loading demo…
import { Block, Stepper } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Stepper active={3}>
<Stepper.Step label="Plan" color="teal" />
<Stepper.Step label="Design" color="cyan" />
<Stepper.Step label="Build" color="violet" />
<Stepper.Step label="Launch" color="pink" />
</Stepper>
</Block>
);
}Vertical Orientation
Switch the orientation to vertical when you need more room for descriptive copy under each step.
Loading demo…
import { Block, Stepper } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Stepper active={1} orientation="vertical">
<Stepper.Step label="Account" description="Create your credentials" />
<Stepper.Step label="Verification" description="Confirm your email" />
<Stepper.Step label="Preferences" description="Adjust defaults" />
</Stepper>
</Block>
);
}Loading Indicator
Replace the step icon with a spinner during long-running work by toggling the
loading prop.Loading demo…
import { Block, Stepper } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Stepper active={1}>
<Stepper.Step label="Details" />
<Stepper.Step label="Processing" loading />
<Stepper.Step label="Ready" />
</Stepper>
</Block>
);
}Size Variants
Compare the
size prop across the full xs–3xl scale while reusing the same steps.Loading demo…
import { Block, Stepper, Text } from '@plocks/ui';
const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
export function Demo() {
return (
<Block fullWidth>
{SIZES.map((size) => (
<Block key={size} fullWidth>
<Text variant="small" c="secondary">{size}</Text>
<Stepper active={1} size={size}>
<Stepper.Step label="Plan" />
<Stepper.Step label="Build" />
<Stepper.Step label="Launch" />
</Stepper>
</Block>
))}
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources