---
title: Vertical stepper
description: Vertical Stepper displays a sequence of steps in a vertical layout, showing progress through a multi-step process.
category: Navigation
related: [Accordions, MultiAccordion, Container]
commonPatterns: [wizard-stepper, onboarding-stepper, form-stepper]
---

Source: https://clickhouse.design/click-ui/verticalstepper

# Vertical stepper

Vertical Stepper provides a visual representation of progress through a multi-step process. It supports both numbered and bulleted step indicators, with collapsible step content. Perfect for wizards, onboarding flows, and multi-step forms.

## Example

## Props

| Prop | Type                       | Default value | Description                                                                            |
| ---- | -------------------------- | ------------- | -------------------------------------------------------------------------------------- |
| type | `"numbered" \| "bulleted"` | `"numbered"`  | Visual style variant - numbered (shows step numbers) or bulleted (shows bullet points) |

```tsx
import { VerticalStepper, Text } from '@clickhouse/click-ui'

<VerticalStepper type="numbered">
<VerticalStepper.Step status="complete" label="Step 1">
  <Text>Step content here</Text>
</VerticalStepper.Step>
</VerticalStepper>
```

### VerticalStepper.Step Props

| Prop      | Type                                     | Default value  | Description                                                                             |
| --------- | ---------------------------------------- | -------------- | --------------------------------------------------------------------------------------- |
| status    | `"active" \| "complete" \| "incomplete"` | `"incomplete"` | Status of the step - active (current), complete (finished), or incomplete (not started) |
| label     | `ReactNode`                              | `undefined`    | Label text or content displayed in the step header                                      |
| collapsed | `boolean`                                | `true`         | Whether the step content is collapsed (hidden) or expanded (visible)                    |
| disabled  | `boolean`                                | `false`        | Whether the step is disabled and cannot be interacted with                              |

```tsx
<VerticalStepper.Step 
status="active" 
label="Step Label"
collapsed={false}
>
<Text>Step content here</Text>
</VerticalStepper.Step>
```

## Quick start

```tsx
import { VerticalStepper, Text } from '@clickhouse/click-ui'

function MyVerticalStepper() {
return (
  <VerticalStepper type="numbered">
    <VerticalStepper.Step status="complete" label="Step 1: Setup">
      <Text>Initial setup completed.</Text>
    </VerticalStepper.Step>
    <VerticalStepper.Step status="active" label="Step 2: Configuration">
      <Text>Configure your settings.</Text>
    </VerticalStepper.Step>
    <VerticalStepper.Step status="incomplete" label="Step 3: Review">
      <Text>Review your configuration.</Text>
    </VerticalStepper.Step>
  </VerticalStepper>
)
}
```

## Related components

- **Accordions**: For collapsible content sections, similar structure to stepper steps.
- **MultiAccordion**: For step-by-step tasks with completion tracking.
- **Container**: For organizing stepper content within layouts.

## Common use cases

### Wizard stepper

```tsx
import { VerticalStepper, Text } from '@clickhouse/click-ui'

function WizardStepper() {
return (
  <VerticalStepper type='numbered'>
    <VerticalStepper.Step status='complete' label='Step 1: Setup'>
      <Text>Initial setup completed.</Text>
    </VerticalStepper.Step>
    <VerticalStepper.Step status='active' label='Step 2: Configuration'>
      <Text>Configure your settings.</Text>
    </VerticalStepper.Step>
    <VerticalStepper.Step status='incomplete' label='Step 3: Review'>
      <Text>Review your configuration.</Text>
    </VerticalStepper.Step>
  </VerticalStepper>
)
}
```

### Bulleted stepper

```tsx
import { VerticalStepper, Text } from '@clickhouse/click-ui'

function BulletedStepper() {
return (
  <VerticalStepper type='bulleted'>
    <VerticalStepper.Step status='complete' label='Step 1: Complete'>
      <Text>This step is complete.</Text>
    </VerticalStepper.Step>
    <VerticalStepper.Step status='active' label='Step 2: Active'>
      <Text>This step is currently active.</Text>
    </VerticalStepper.Step>
    <VerticalStepper.Step status='incomplete' label='Step 3: Pending'>
      <Text>This step is pending.</Text>
    </VerticalStepper.Step>
  </VerticalStepper>
)
}
```