# Steps

An ordered progress sequence with explicit current, completed, upcoming and error states.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Steps } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Steps label="Project setup" currentValue="access" items={[{value:"details",title:"Details"},{value:"access",title:"Access"},{value:"review",title:"Review"}]} />
    </FloodRoot>
  );
}
```

## Design notes

- Steps renders an ordered list, not tabs. currentValue identifies aria-current=step; preceding steps default to complete and later steps to upcoming. Item status may explicitly mark complete/upcoming/error. Omitted currentValue starts at the first step.
- Without onStepChange, steps are informative content. Providing it renders native step buttons; the host owns navigation and currentValue updates. Disabled items only affect those actions. Every state has text through customizable statusLabels; color and icons are additional cues. Horizontal presentation stacks in narrow viewports.
- Original compatible addition in the unpublished 0.2.5 source candidate.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `items` | `readonly StepItem[]` | `Required` |
| `currentValue` | `string` | `—` |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |
| `onStepChange` | `(value: string) => void` | `—` |
| `statusLabels` | `{complete: string; current: string; upcoming: string; error: string}` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLOListElement>, "children" \| "role" \| "aria-label">` | `Forwarded` |