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

This step has been completed.

This is the current active step.

Props

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

VerticalStepper.Step Props

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

Quick Start

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>
)
}

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

Initial setup completed.

Configure your settings.

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

This step is complete.

This step is currently active.

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>
)
}

Multi Accordion Pagination