## Import

```jsx
import { ProgressIndicator } from "@cfa/react-core";
```

## Live Editor

```jsx
function ProgressIndicatorExample() {
  return (
    <ProgressIndicator.Root>
      <ProgressIndicator.Step step={1} state="complete" label="Step 1" />
      <ProgressIndicator.Step step={2} state="active" label="Step 2" />
      <ProgressIndicator.Step step={3} state="inactive" label="Step 3" />
    </ProgressIndicator.Root>
  );
}
```

## Examples

### Default

The default layout displays each step label below its progress segment.

```jsx
function DefaultProgressIndicator() {
  return (
    <ProgressIndicator.Root>
      <ProgressIndicator.Step step={1} state="complete" label="Account" />
      <ProgressIndicator.Step step={2} state="active" label="Payment" />
      <ProgressIndicator.Step step={3} state="inactive" label="Review" />
    </ProgressIndicator.Root>
  );
}
```

### Compact

The compact layout displays a summary with the current step, next step, and count.

```jsx
function CompactProgressIndicator() {
  return (
    <ProgressIndicator.Root
      compact
      currentStep={2}
      totalSteps={4}
      currentLabel="Payment"
      nextLabel="Review"
    >
      <ProgressIndicator.Step step={1} state="complete" label="Account" />
      <ProgressIndicator.Step step={2} state="active" label="Payment" />
      <ProgressIndicator.Step step={3} state="inactive" label="Review" />
      <ProgressIndicator.Step step={4} state="inactive" label="Confirmation" />
    </ProgressIndicator.Root>
  );
}
```

### Complete

Use `isComplete` to mark every step complete and show the complete state.

```jsx
function CompleteProgressIndicator() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
      <ProgressIndicator.Root isComplete>
        <ProgressIndicator.Step step={1} state="active" label="Account" />
        <ProgressIndicator.Step step={2} state="inactive" label="Payment" />
        <ProgressIndicator.Step step={3} state="inactive" label="Review" />
      </ProgressIndicator.Root>

      <ProgressIndicator.Root compact isComplete completeLabel="Complete">
        <ProgressIndicator.Step step={1} state="active" label="Account" />
        <ProgressIndicator.Step step={2} state="inactive" label="Payment" />
        <ProgressIndicator.Step step={3} state="inactive" label="Review" />
      </ProgressIndicator.Root>
    </div>
  );
}
```

### useStepState

`ProgressIndicator` accepts step state directly. You can manage step state yourself or use the `useStepState` hook for simple step navigation.

```jsx
function ControlledProgressIndicator() {
  const { steps, activeStep, decrementStep, incrementStep } = useStepState([
    { label: "Step 1" },
    { label: "Step 2" },
    { label: "Step 3" },
    { label: "Step 4" },
  ]);

  const [isComplete, setIsComplete] = React.useState(false);
  const nextStep = steps.find((s) => s.step === (activeStep?.step ?? 0) + 1);

  return (
    <>
      <ProgressIndicator.Root
        compact
        currentStep={activeStep?.step}
        totalSteps={steps.length}
        isComplete={isComplete}
        currentLabel={activeStep?.label}
        nextLabel={nextStep?.label}
      >
        {steps.map((s) => (
          <ProgressIndicator.Step key={s.step} step={s.step} state={s.state} label={s.label} />
        ))}
      </ProgressIndicator.Root>

      <div style={{ display: "flex", gap: 8, marginTop: 32 }}>
        <Button
          size="md"
          onPress={() => {
            if (isComplete) {
              setIsComplete(false);
            } else {
              decrementStep();
            }
          }}
          isDisabled={!isComplete && activeStep?.step === 1}
          variant="secondary"
        >
          Back
        </Button>
        <Button
          size="md"
          onPress={() => {
            if (activeStep?.step === steps.length) {
              setIsComplete(true);
            } else {
              incrementStep();
            }
          }}
          isDisabled={isComplete}
        >
          Next
        </Button>
      </div>
    </>
  );
}
```

## Props

### ProgressIndicator.Root

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children\* | `ReactNode` | - | \`ProgressIndicator.Step\` children. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| className | `string` | - | CSS class names to apply custom styling. |
| compact | `boolean` | `false` | Uses compact progress segments and shows the counter summary. |
| completeLabel | `ReactNode` | `Complete!` | Text shown when every step is complete. |
| currentLabel | `ReactNode` | - | Compact layout: bold label for the active step. |
| currentStep | `number` | - | Compact layout: current step number shown in the counter. |
| id | `string` | - | The unique identifier for the DOM element. |
| isComplete | `boolean` | `false` | Shows the complete state. |
| nextLabel | `ReactNode` | - | Compact layout: next-step label rendered after "Next:". |
| role | `AriaRole` | - | The ARIA role assigned to the element to improve accessibility. Example roles include "button", "navigation", "dialog", etc. |
| style | `CSSProperties` | - | Inline styles specified as a React-compatible CSS properties object. |
| totalSteps | `number` | - | Compact layout: total number of steps shown in the counter. |

### ProgressIndicator.Step

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| step\* | `number` | - | The 1-based step number. |
| children | `ReactNode` | - | The content or child elements nested within this component. |
| className | `string` | - | CSS class names to apply custom styling. |
| id | `string` | - | The unique identifier for the DOM element. |
| label | `ReactNode` | - | Label for the step. Compact labels are visually hidden. |
| role | `AriaRole` | - | The ARIA role assigned to the element to improve accessibility. Example roles include "button", "navigation", "dialog", etc. |
| state | `ProgressIndicatorStepState` | `inactive` | The state of the step. |
| style | `CSSProperties` | - | Inline styles specified as a React-compatible CSS properties object. |
| key | `Key \ | null` | - | - |
| ref | `Ref<HTMLLIElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set \`ref.current\` to \`null\` (or call the ref with \`null\` if you passed a callback ref).&#xA;@see \{@link https\://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |