Stepper

Stable

Shows progress through an ordered, multi-step task.

Use Stepper for flows that must be completed in order, such as creating a signature: choose a template, add details, assign users, deploy. Steps before the active one are complete; mark a step with status="error" when it needs attention. Pass onStepClick to let people return to completed steps.

Source Edit docs Report an issue

Overview

Choose template, Step 1 of 4, Completed
Add details, Step 2 of 4, Completed
Assign users, Step 3 of 4, Current step
Deploy, Step 4 of 4, Not started

tsx

import { Step, Stepper } from '@bindshq/stance-react';

export function Basic() {
  return (
    <Stepper activeStep={2} style={{ width: '100%' }}>
      <Step title="Choose template" />
      <Step title="Add details" />
      <Step title="Assign users" />
      <Step title="Deploy" />
    </Stepper>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Choose template, Step 1 of 4, Completed
Add details, Step 2 of 4, Completed
Assign users, Step 3 of 4, Current step
Deploy, Step 4 of 4, Not started

Light

Choose template, Step 1 of 4, Completed
Add details, Step 2 of 4, Completed
Assign users, Step 3 of 4, Current step
Deploy, Step 4 of 4, Not started

Dark

Choose template, Step 1 of 4, Completed
Add details, Step 2 of 4, Completed
Assign users, Step 3 of 4, Current step
Deploy, Step 4 of 4, Not started

High contrast

Import

tsx

import { Stepper, Step } from '@bindshq/stance-react';

Platforms

Stepper has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { Stepper, Step } from '@bindshq/stance-react';

Examples

Clickable steps

Completed steps become buttons that jump back.

Users, Step 3 of 4, Current step
Deploy, Step 4 of 4, Not started

tsx

import { useState } from 'react';
import { Button, Step, Stepper } from '@bindshq/stance-react';

export function Interactive() {
  const [step, setStep] = useState(2);
  return (
    <div style={{ display: 'grid', gap: 24, width: '100%' }}>
      <Stepper activeStep={step} onStepClick={setStep}>
        <Step title="Template" />
        <Step title="Details" />
        <Step title="Users" />
        <Step title="Deploy" />
      </Stepper>
      <div style={{ display: 'flex', gap: 8 }}>
        <Button variant="outline" disabled={step === 0} onClick={() => setStep((s) => s - 1)}>
          Back
        </Button>
        <Button disabled={step === 3} onClick={() => setStep((s) => s + 1)}>
          Continue
        </Button>
      </div>
    </div>
  );
}

Vertical with descriptions

Connect ExchangeRelay connector verified, Step 1 of 4, Completed
Sync usersImporting 214 users from Azure AD, Step 2 of 4, Current step
Assign templatesChoose a signature per team, Step 3 of 4, Not started
Go liveSignatures apply to outgoing mail, Step 4 of 4, Not started

tsx

import { Step, Stepper } from '@bindshq/stance-react';

export function Vertical() {
  return (
    <Stepper activeStep={1} orientation="vertical">
      <Step title="Connect Exchange" description="Relay connector verified" />
      <Step title="Sync users" description="Importing 214 users from Azure AD" />
      <Step title="Assign templates" description="Choose a signature per team" />
      <Step title="Go live" description="Signatures apply to outgoing mail" />
    </Stepper>
  );
}

Error state

Upload spreadsheet, Step 1 of 4, Completed
Map columns2 columns unmapped, Step 2 of 4, Has errors
Review, Step 3 of 4, Current step
Import, Step 4 of 4, Not started

tsx

import { Step, Stepper } from '@bindshq/stance-react';

export function WithError() {
  return (
    <Stepper activeStep={2} style={{ width: '100%' }}>
      <Step title="Upload spreadsheet" />
      <Step title="Map columns" status="error" description="2 columns unmapped" />
      <Step title="Review" />
      <Step title="Import" />
    </Stepper>
  );
}

API reference

`Stepper`

Prop	Type	Default	Description
`activeStep`* required	`number`	None	Zero-based index of the current step.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Horizontal steppers stack below 640px.
`onStepClick`	`(index: number) => void`	None	Makes completed steps clickable.
`allowFutureSteps`	`boolean`	`false`	Also allow clicking upcoming steps.
`aria-label`	`string`	`'Progress'`	Name of the list.
`labels`	`Partial<StepperLabels>`	None	Translatable status words and “Step x of y”.

`Step`

Prop	Type	Default	Description
`title`* required	`ReactNode`	None	Step name.
`description`	`ReactNode`	None	Supporting text.
`status`	`'complete' \| 'current' \| 'upcoming' \| 'error'`	None	Overrides the derived status.
`icon`	`ReactNode`	None	Custom indicator content.
`disabled`	`boolean`	None	Prevents clicking this step.

Accessibility

An ordered list; the current step has aria-current="step".
Each step announces its position and status, e.g. “Assign users, Step 3 of 4, Current step”, so meaning never depends on colour or icons.
Clickable steps are real buttons; non-clickable steps are not focusable.

Keyboard

Keys	Action
`Tab`	Moves between clickable steps.
`Enter` `Space`	Returns to the step.

Usage guidelines

Do

Keep to between three and seven steps.
Use short noun or verb phrases.

Don’t

Use for navigation between unrelated pages.
Let people skip required steps.

Components Navigation

Stepper

Stable

Shows progress through an ordered, multi-step task.

Source Edit docs Report an issue

Overview

Choose template, Step 1 of 4, Completed
Add details, Step 2 of 4, Completed
Assign users, Step 3 of 4, Current step
Deploy, Step 4 of 4, Not started

tsx

import { Step, Stepper } from '@bindshq/stance-react';

export function Basic() {
  return (
    <Stepper activeStep={2} style={{ width: '100%' }}>
      <Step title="Choose template" />
      <Step title="Add details" />
      <Step title="Assign users" />
      <Step title="Deploy" />
    </Stepper>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Choose template, Step 1 of 4, Completed
Add details, Step 2 of 4, Completed
Assign users, Step 3 of 4, Current step
Deploy, Step 4 of 4, Not started

Light

Choose template, Step 1 of 4, Completed
Add details, Step 2 of 4, Completed
Assign users, Step 3 of 4, Current step
Deploy, Step 4 of 4, Not started

Dark

Choose template, Step 1 of 4, Completed
Add details, Step 2 of 4, Completed
Assign users, Step 3 of 4, Current step
Deploy, Step 4 of 4, Not started

High contrast

Import

tsx

import { Stepper, Step } from '@bindshq/stance-react';

Platforms

Stepper has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { Stepper, Step } from '@bindshq/stance-react';

Examples

Clickable steps

Completed steps become buttons that jump back.

Users, Step 3 of 4, Current step
Deploy, Step 4 of 4, Not started

tsx

import { useState } from 'react';
import { Button, Step, Stepper } from '@bindshq/stance-react';

export function Interactive() {
  const [step, setStep] = useState(2);
  return (
    <div style={{ display: 'grid', gap: 24, width: '100%' }}>
      <Stepper activeStep={step} onStepClick={setStep}>
        <Step title="Template" />
        <Step title="Details" />
        <Step title="Users" />
        <Step title="Deploy" />
      </Stepper>
      <div style={{ display: 'flex', gap: 8 }}>
        <Button variant="outline" disabled={step === 0} onClick={() => setStep((s) => s - 1)}>
          Back
        </Button>
        <Button disabled={step === 3} onClick={() => setStep((s) => s + 1)}>
          Continue
        </Button>
      </div>
    </div>
  );
}

Vertical with descriptions

Connect ExchangeRelay connector verified, Step 1 of 4, Completed
Sync usersImporting 214 users from Azure AD, Step 2 of 4, Current step
Assign templatesChoose a signature per team, Step 3 of 4, Not started
Go liveSignatures apply to outgoing mail, Step 4 of 4, Not started

tsx

import { Step, Stepper } from '@bindshq/stance-react';

export function Vertical() {
  return (
    <Stepper activeStep={1} orientation="vertical">
      <Step title="Connect Exchange" description="Relay connector verified" />
      <Step title="Sync users" description="Importing 214 users from Azure AD" />
      <Step title="Assign templates" description="Choose a signature per team" />
      <Step title="Go live" description="Signatures apply to outgoing mail" />
    </Stepper>
  );
}

Error state

Upload spreadsheet, Step 1 of 4, Completed
Map columns2 columns unmapped, Step 2 of 4, Has errors
Review, Step 3 of 4, Current step
Import, Step 4 of 4, Not started

tsx

import { Step, Stepper } from '@bindshq/stance-react';

export function WithError() {
  return (
    <Stepper activeStep={2} style={{ width: '100%' }}>
      <Step title="Upload spreadsheet" />
      <Step title="Map columns" status="error" description="2 columns unmapped" />
      <Step title="Review" />
      <Step title="Import" />
    </Stepper>
  );
}

API reference

`Stepper`

Prop	Type	Default	Description
`activeStep`* required	`number`	None	Zero-based index of the current step.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Horizontal steppers stack below 640px.
`onStepClick`	`(index: number) => void`	None	Makes completed steps clickable.
`allowFutureSteps`	`boolean`	`false`	Also allow clicking upcoming steps.
`aria-label`	`string`	`'Progress'`	Name of the list.
`labels`	`Partial<StepperLabels>`	None	Translatable status words and “Step x of y”.

`Step`

Prop	Type	Default	Description
`title`* required	`ReactNode`	None	Step name.
`description`	`ReactNode`	None	Supporting text.
`status`	`'complete' \| 'current' \| 'upcoming' \| 'error'`	None	Overrides the derived status.
`icon`	`ReactNode`	None	Custom indicator content.
`disabled`	`boolean`	None	Prevents clicking this step.

Accessibility

An ordered list; the current step has aria-current="step".
Each step announces its position and status, e.g. “Assign users, Step 3 of 4, Current step”, so meaning never depends on colour or icons.
Clickable steps are real buttons; non-clickable steps are not focusable.

Keyboard

Keys	Action
`Tab`	Moves between clickable steps.
`Enter` `Space`	Returns to the step.

Overview

Light, dark and high contrast

Import

Platforms

Examples

Clickable steps

Vertical with descriptions

Error state

API reference

Stepper

Step

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Platforms

Examples

Clickable steps

Vertical with descriptions

Error state

API reference

Stepper

Step

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

`Stepper`

`Step`

`Stepper`

`Step`