# components/Stepper (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/Stepper.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/Stepper.tsx).

## Components

### `Stepper`

Component.

Renders the progress of a wizard as dots or as a rail of step names. The current step carries
`aria-current="step"`. When `onSelect` is set, done steps go back through it.

```ts
function Stepper(props: StepperProps): Element
```

**Parameters**

- `props` (`StepperProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the navigation.
- `current` (`string`): Id of the current step.
- `label?` (`string`): Accessible name of the navigation. Defaults to the `steps` label.
- `onSelect?` (`(id: string) => void`): Called with a done step's id when it is clicked. Absent: done steps are not buttons.
- `steps` (`readonly StepperStep[]`): The steps, in order.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `variant?` (`'dots' | 'rail'`, default `'dots'`): `dots` for a top bar, `rail` for a column of names.

Source: [ui/src/components/Stepper.tsx:48](https://github.com/Tahul/zidane/blob/main/ui/src/components/Stepper.tsx#L48)

## Interfaces

### `StepperProps`

Interface.

Props for [`Stepper`](https://zidane.si/docs/reference/ui-components-stepper.md#Stepper).

```ts
interface StepperProps
```

**Properties**

- `className?` (`string`): Extra classes on the navigation.
- `current` (`string`): Id of the current step.
- `label?` (`string`): Accessible name of the navigation. Defaults to the `steps` label.
- `onSelect?` (`(id: string) => void`): Called with a done step's id when it is clicked. Absent: done steps are not buttons.
- `steps` (`readonly StepperStep[]`): The steps, in order.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `variant?` (`'dots' | 'rail'`, default `'dots'`): `dots` for a top bar, `rail` for a column of names.

Source: [ui/src/components/Stepper.tsx:22](https://github.com/Tahul/zidane/blob/main/ui/src/components/Stepper.tsx#L22)

### `StepperStep`

Interface.

One step of a [`Stepper`](https://zidane.si/docs/reference/ui-components-stepper.md#Stepper).

```ts
interface StepperStep
```

**Properties**

- `id` (`string`): Stable id, passed to `onSelect`.
- `label` (`string`): Step name: the rail's text, the dot's tooltip and accessible name.

Source: [ui/src/components/Stepper.tsx:12](https://github.com/Tahul/zidane/blob/main/ui/src/components/Stepper.tsx#L12)