Skip to main content
USWDS + Tailwind

Step indicator

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

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. complete
  2. complete
  3. current
  4. incomplete
  5. incomplete
Step 3 of 5Supporting documents
step-indicator-demo.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:

<StepIndicator.List>
  <StepIndicator.Segments />
</StepIndicator.List>

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

<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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. complete
  2. complete
  3. current
  4. incomplete
  5. incomplete
Step 3 of 5Supporting documents
step-indicator-centered-demo.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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. complete
  2. complete
  3. current
  4. incomplete
  5. incomplete
Step 3 of 5Supporting documents
step-indicator-counters-demo.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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. complete
  2. complete
  3. current
  4. incomplete
  5. incomplete
Step 3 of 5Supporting documents
step-indicator-counters-small-demo.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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  1. complete
  2. complete
  3. current
  4. incomplete
  5. incomplete
Step 3 of 5Supporting documents
step-indicator-no-labels-demo.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.

PropTypeDefaultDescription
steps{ label: string }[][]Ordered step labels.
currentStepnumber (required)—One-based current step.
variantdefault | centered | noLabelsdefaultControls label alignment and visibility.
countersunset | sm | lgunsetControls numbered circle styling.

List<ol>

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

PropTypeDescription
childrenReactNode | ({ steps }) => ReactNodeCan render from computed step statuses.

ListItem<li>

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

PropTypeDefaultDescription
statuscomplete | current | incompleteincompleteSelects step styling.

Segment<span>

Displays the status segment and optional counter.

PropTypeDescription
statuscomplete | 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.

PropTypeDescription
childrenReactNode | (context) => ReactNodeA render function replaces the default counter content.

Heading<span>

Displays a heading for the current step.

PropTypeDescription
labelstringOverrides the computed heading text.

Segments

Renders a ListItem and Segment for every computed step.