# Steps

A step indicator for multi-stage flows. It runs sideways by default; set `orientation="vertical"` to stack the steps top to bottom.

In the vertical layout, put the title and description in a `Box` with `flex="1"` and bottom padding, so the separator stretches to the next step.

Group: Navigation

## Import

```tsx
import { Steps } from "@indoku/ui"
```

## Examples

### Horizontal

```tsx
function StepsHorizontal() {
  return (
    <Steps.Root defaultStep={1} count={items.length}>
      <Steps.List>
        {items.map((s, i) => (
          <Steps.Item key={s.title} index={i}>
            <Steps.Indicator>
              <Steps.Status complete={<LuCheck />} incomplete={<Steps.Number />} current={<Steps.Number />} />
            </Steps.Indicator>
            <Steps.Title>{s.title}</Steps.Title>
            <Steps.Separator />
          </Steps.Item>
        ))}
      </Steps.List>
    </Steps.Root>
  )
}
```

### Vertical

`orientation="vertical"` with a fixed height.

```tsx
function StepsVertical() {
  return (
    <Steps.Root orientation="vertical" defaultStep={1} count={items.length} height="260px">
      <Steps.List>
        {items.map((s, i) => (
          <Steps.Item key={s.title} index={i}>
            <Steps.Indicator>
              <Steps.Status complete={<LuCheck />} incomplete={<Steps.Number />} current={<Steps.Number />} />
            </Steps.Indicator>
            <Box flex="1" pb="8">
              <Steps.Title>{s.title}</Steps.Title>
              <Steps.Description>{s.description}</Steps.Description>
            </Box>
            <Steps.Separator />
          </Steps.Item>
        ))}
      </Steps.List>
    </Steps.Root>
  )
}
```

### Content and triggers

`Steps.Content`, `PrevTrigger` and `NextTrigger`.

```tsx
function StepsControlled() {
  return (
    <Steps.Root defaultStep={0} count={items.length}>
      <Steps.List>
        {items.map((s, i) => (
          <Steps.Item key={s.title} index={i}>
            <Steps.Indicator>
              <Steps.Status complete={<LuCheck />} incomplete={<Steps.Number />} current={<Steps.Number />} />
            </Steps.Indicator>
            <Steps.Title>{s.title}</Steps.Title>
            <Steps.Separator />
          </Steps.Item>
        ))}
      </Steps.List>
      {items.map((s, i) => (
        <Steps.Content key={s.title} index={i}>
          {s.description}
        </Steps.Content>
      ))}
      <Steps.CompletedContent>All steps are complete.</Steps.CompletedContent>
      <HStack mt="4">
        <Steps.PrevTrigger asChild>
          <Button>Prev</Button>
        </Steps.PrevTrigger>
        <Steps.NextTrigger asChild>
          <Button>Next</Button>
        </Steps.NextTrigger>
      </HStack>
    </Steps.Root>
  )
}
```

## Props

### Steps.Root

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `count` * | `number` |  | Total number of steps. |
| `step / defaultStep` | `number` |  | Controlled or initial current step (0-based). |
| `onStepChange` | `(details: { step: number }) => void` |  | Called when the step changes. |
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction. |
| `linear` | `boolean` | `false` | Block jumping ahead of the current step. |

`*` = required. Style props and HTML attributes are accepted too.

## See also

- Tabs: https://ui.indoku.org/docs/tabs