Stepper
A multi-step progress indicator that guides users through a sequence of steps.
Import
import { Stepper, Step } from '@tac-ui/native';Playground
Interactively configure the Stepper props below.
<Stepper activeStep={1} orientation="horizontal">
<Step title="Account" description="Create your account" />
<Step title="Profile" description="Set up your profile" />
<Step title="Review" description="Review and confirm" />
<Step title="Done" description="All finished" />
</Stepper>Horizontal
The default horizontal layout renders step circles connected by animated progress bars, with labels below. Steps before activeStep show a checkmark; the active step is highlighted with a ring.
<Stepper activeStep={1} orientation="horizontal">
<Step title="Account" description="Create your account" />
<Step title="Profile" description="Set up your profile" />
<Step title="Review" description="Review and confirm" />
</Stepper>Vertical
In vertical orientation, steps are stacked with a connecting animated line between each step circle. This layout suits narrow containers and order-tracking flows.
<Stepper activeStep={2} orientation="vertical">
<Step title="Order placed" description="We have received your order" />
<Step title="Processing" description="Your order is being prepared" />
<Step title="Shipped" description="Your order is on the way" />
<Step title="Delivered" description="Your order has been delivered" />
</Stepper>Center Aligned Labels
Set alignLabels="center" to center all step labels beneath their circles, instead of the default edge alignment where the first label is left-aligned and the last is right-aligned.
<Stepper activeStep={1} alignLabels="center">
<Step title="Account" description="Create your account" />
<Step title="Profile" description="Set up your profile" />
<Step title="Review" description="Review and confirm" />
</Stepper>With Icons
Pass a React node to the icon prop on each Step to replace the default step number with a custom icon. Completed steps always show a checkmark regardless of the icon prop.
import { User, Settings, CheckCircle } from '@tac-ui/icon-native';
<Stepper activeStep={1} orientation="horizontal">
<Step title="Account" description="Create your account" icon={<User size={14} />} />
<Step title="Settings" description="Configure preferences" icon={<Settings size={14} />} />
<Step title="Complete" description="All done" icon={<CheckCircle size={14} />} />
</Stepper>Vertical with Icons
Icons work with vertical orientation too, useful for timeline or order-tracking flows with semantic icon indicators at each step.
import { Package, Truck, MapPin } from '@tac-ui/icon-native';
<Stepper activeStep={2} orientation="vertical">
<Step title="Order placed" description="We have received your order" icon={<Package size={14} />} />
<Step title="Shipped" description="Your order is on the way" icon={<Truck size={14} />} />
<Step title="Delivered" description="Your order has been delivered" icon={<MapPin size={14} />} />
</Stepper>API Reference
Stepper props:
| Prop | Type | Default | Description |
|---|---|---|---|
| activeStep | number | 0 | Zero-based index of the currently active step. Steps before this index are shown as completed. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction of the stepper. |
| alignLabels | "edge" | "center" | "edge" | Label alignment for horizontal layout. Edge aligns first label left and last label right; center aligns all labels centrally. |
| style | ViewStyle | - | Additional styles applied to the root container View. |
| children | React.ReactNode | - | One or more Step components. |
Step props:
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Step title text displayed below the circle (horizontal) or beside it (vertical). |
| description | string | - | Optional supporting text displayed below the title. |
| icon | React.ReactNode | - | Custom icon displayed in the step circle instead of the step number. Overridden by a checkmark when the step is completed. |
| status | "completed" | "active" | "pending" | - | Override the step's visual state. Defaults to auto-detection from activeStep. |