Components/Stepper

Search documentation

Jump to any guide or component.

↑↓ move · Enter open · Esc close

Navigation · Stepper + Step

SSR NativeAccessible

Stepper

Shows progress through a sequential multi-step workflow.

Live previewv0.1.4
  1. AccountCompleted
  2. 2
    WorkspaceIn progress
  3. 3
    DeployUpcoming
Astro
---
import { Stepper, Step } from '@charvesta/cetha';
---

<Stepper label="Setup"><Step index={1} title="Account" state="complete" /><Step index={2} title="Workspace" state="current" /></Stepper>

API reference

PropTypeDefaultDescription
label*stringSequence label.
title*stringStep title.
index*numberStep number.
state'complete' | 'current' | 'upcoming''upcoming'Step state.
classstringAdditional classes forwarded to the rendered element.

Accessibility

The current step is exposed with aria-current="step".