---
title: Step indicator (React) - USWDS + Tailwind
description: Show progress through a multi-step process with step indicators,
  labels, and counters.
---

# Step indicator

Show progress through a multi-step process with step indicators, labels, and counters.

## Examples

### Default

```tsx
import { StepIndicator } from '@uswds-tailwind/react/step-indicator'

const steps = [
  { label: 'Personal information' },
  { label: 'Household status' },
  { label: 'Supporting documents' },
  { label: 'Signature' },
  { label: 'Review and submit' },
]

export default function StepIndicatorDemo() {
  return (
    <StepIndicator.Root steps={steps} currentStep={3}>
      <StepIndicator.List>
        {({ steps }) =>
          steps.map(step => (
            <StepIndicator.ListItem key={step.label} status={step.status}>
              <StepIndicator.Segment status={step.status}>
                {step.label}
              </StepIndicator.Segment>
            </StepIndicator.ListItem>
          ))}
      </StepIndicator.List>
      <StepIndicator.Summary>
        <StepIndicator.Counter />
        <StepIndicator.Heading />
      </StepIndicator.Summary>
    </StepIndicator.Root>
  )
}
```

#### Segments shortcut

`StepIndicator.Segments` renders a `ListItem` and `Segment` for each step, passing the computed status to both. Inside `StepIndicator.List`, this:

```tsx
<StepIndicator.List>
  <StepIndicator.Segments />
</StepIndicator.List>
```

is shorthand for the render function used in the full example above:

```tsx
<StepIndicator.List>
  {({ steps }) =>
    steps.map(step => (
      <StepIndicator.ListItem key={step.label} status={step.status}>
        <StepIndicator.Segment status={step.status}>
          {step.label}
        </StepIndicator.Segment>
      </StepIndicator.ListItem>
    ))}
</StepIndicator.List>
```

### Centered

```tsx
import { StepIndicator } from '@uswds-tailwind/react/step-indicator'

const steps = [
  { label: 'Personal information' },
  { label: 'Household status' },
  { label: 'Supporting documents' },
  { label: 'Signature' },
  { label: 'Review and submit' },
]

export default function StepIndicatorCenteredDemo() {
  return (
    <StepIndicator.Root variant="centered" steps={steps} currentStep={3}>
      <StepIndicator.List><StepIndicator.Segments /></StepIndicator.List>
      <StepIndicator.Summary>
        <StepIndicator.Counter />
        <StepIndicator.Heading />
      </StepIndicator.Summary>
    </StepIndicator.Root>
  )
}
```

### Counters

```tsx
import { StepIndicator } from '@uswds-tailwind/react/step-indicator'

const steps = [
  { label: 'Personal information' },
  { label: 'Household status' },
  { label: 'Supporting documents' },
  { label: 'Signature' },
  { label: 'Review and submit' },
]

export default function StepIndicatorCountersDemo() {
  return (
    <StepIndicator.Root counters="lg" steps={steps} currentStep={3}>
      <StepIndicator.List><StepIndicator.Segments /></StepIndicator.List>
      <StepIndicator.Summary>
        <StepIndicator.Counter />
        <StepIndicator.Heading />
      </StepIndicator.Summary>
    </StepIndicator.Root>
  )
}
```

### Counters Small

```tsx
import { StepIndicator } from '@uswds-tailwind/react/step-indicator'

const steps = [
  { label: 'Personal information' },
  { label: 'Household status' },
  { label: 'Supporting documents' },
  { label: 'Signature' },
  { label: 'Review and submit' },
]

export default function StepIndicatorCountersSmallDemo() {
  return (
    <StepIndicator.Root counters="sm" steps={steps} currentStep={3}>
      <StepIndicator.List><StepIndicator.Segments /></StepIndicator.List>
      <StepIndicator.Summary>
        <StepIndicator.Counter />
        <StepIndicator.Heading />
      </StepIndicator.Summary>
    </StepIndicator.Root>
  )
}
```

### No Labels

```tsx
import { StepIndicator } from '@uswds-tailwind/react/step-indicator'

const steps = [
  { label: 'Personal information' },
  { label: 'Household status' },
  { label: 'Supporting documents' },
  { label: 'Signature' },
  { label: 'Review and submit' },
]

export default function StepIndicatorNoLabelsDemo() {
  return (
    <StepIndicator.Root variant="noLabels" steps={steps} currentStep={3}>
      <StepIndicator.List><StepIndicator.Segments /></StepIndicator.List>
      <StepIndicator.Summary>
        <StepIndicator.Counter />
        <StepIndicator.Heading />
      </StepIndicator.Summary>
    </StepIndicator.Root>
  )
}
```

## Component API

Root receives ordered steps and the current step number. List can render its children or use the Segments shortcut.

### Root `<div>`

Computes each step status.

| Prop | Type | Default | Description |
| - | - | - | - |
| `steps` | `{ label: string }[]` | `[]` | Ordered step labels. |
| `currentStep` | `number (required)` | `—` | One-based current step. |
| `variant` | `default \| centered \| noLabels` | `default` | Controls label alignment and visibility. |
| `counters` | `unset \| sm \| lg` | `unset` | Controls numbered circle styling. |

### List `<ol>`

Put ListItem parts here or render them from computed step statuses.

| Prop | Type | Description |
| - | - | - |
| `children` | `ReactNode \| ({ steps }) => ReactNode` | Can render from computed step statuses. |

### ListItem `<li>`

Pass its computed status to select complete, current, or incomplete styling.

| Prop | Type | Default | Description |
| - | - | - | - |
| `status` | `complete \| current \| incomplete` | `incomplete` | Selects step styling. |

### Segment `<span>`

Displays the status segment and optional counter.

| Prop | Type | Description |
| - | - | - |
| `status` | `complete \| current \| incomplete (required)` | Selects segment styling. |

### Label `<span>`

Displays a step label when the variant allows labels.

### Summary `<div>`

Holds a text summary of progress.

### Counter `<span>`

Displays the current and total steps.

| Prop | Type | Description |
| - | - | - |
| `children` | `ReactNode \| (context) => ReactNode` | A render function replaces the default counter content. |

### Heading `<span>`

Displays a heading for the current step.

| Prop | Type | Description |
| - | - | - |
| `label` | `string` | Overrides the computed heading text. |

### Segments

Renders a ListItem and Segment for every computed step.