# Stepper

> The wizard's step list: lettered markers, states, and optional navigation back to finished steps.

Category: Navigation. Docs page: https://rime.mjsons.net/components/stepper

## Installation

```bash
npx shadcn@latest add KezLahd/rime/stepper
```

Stepper heads a multi-step form. Steps are complete, current, upcoming or error; onStepClick lets people return to a finished step.

## Usage

```tsx
import { Stepper } from "@/components/ui";

<Stepper aria-label="Checkout" steps={steps} onStepClick={goTo} />
```

## Props: Stepper

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` (required) | `ReadonlyArray<StepperStep>` |  |  |
| `onStepClick` | `(id: string) => void` |  | Makes complete, error and current steps clickable. Upcoming steps never are. |
| `aria-label` | `string` |  |  |
| `className` | `string` |  |  |

## Examples

### Default

```tsx
<Stepper steps={steps} aria-label="Checkout" />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--r-flat` | `1px` |

System tokens it reads: `--brand`, `--brand-deep`, `--brand-gradient`, `--danger-base`, `--danger-ink`, `--dur`, `--ease`, `--focus-ring`, `--glow-sm`, `--ink-brand`, `--ink-heading`, `--ink-inverse`, `--ink-muted`, `--ink-secondary`, `--r-sm`, `--recess-fill`, `--rgb-brand`, `--rgb-brand-deep`, `--rgb-danger`, `--shadow-recess`, `--surface-solid`, `--text-caption`, `--text-micro`.

## Accessibility

- The current step carries aria-current="step".

## Do

- Let people go back to any finished step.

## Don't

- Don't let people jump ahead past an unfinished step.