Steps

Use Steps

Steps is a named export of @flood-md/react. Connect the package once, then import what you use.

"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