# Stepper

Shows progress through a fixed sequence of steps.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Stepper.tsx)

## Overview

A stepper shows progress through a fixed sequence of steps as a row of segments.

Pass `aria-label` to name the flow, such as Account setup.

## Examples

### Basic

```tsx
import { Stepper, style } from '@tempoxyz/ds'

export function Demo() {
  return <Stepper.Root aria-label="Step 1 of 3" count={3} value={1} {...styles.stepper()} />
}

namespace styles {
  export const stepper = style({ maxWidth: '24rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Stepper/Basic.tsx)

### Value

Set `count` to the number of steps and `value` to the current step, from `1` to `count`.

```tsx
import { Stepper, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.stack()}>
      {[1, 2, 3].map((value) => (
        <Stepper.Root aria-label={`Step ${value} of 3`} count={3} key={value} value={value} />
      ))}
    </div>
  )
}

namespace styles {
  export const stack = style({
    display: 'flex',
    flexDirection: 'column',
    gap: '4',
    maxWidth: '24rem !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Stepper/Value.tsx)

## Guidelines

TODO: Write guidelines for Stepper.