Stepper

Displays progress through a sequence of logical steps.

Examples

Default

<Stepper activeStep="profile" orientation="horizontal" steps={baseSteps} />

Vertical

<Stepper
  activeStep="profile"
  orientation="vertical"
  steps={[ { id: 'account', label: 'Account', description: 'Create account', content: <Text as="p">Account details are complete.</Text>, }, { id: 'profile', label: 'Profile', description: 'Add details', content: <Text as="p">Profile details are being edited.</Text>, }, {id: 'review', label: 'Review', description: 'Confirm setup'}, ]}
/>

Non Linear

<Stepper
  {...args}
  activeStep={activeStep}
  onStepClick={setActiveStep}
  steps={baseSteps}
/>

Non Linear Vertical

<Stepper
  {...args}
  activeStep={activeStep}
  onStepClick={setActiveStep}
  steps={[
    {
      id: 'account',
      label: 'Account',
      description: 'Create account',
      content: <Text as="p">Account content here.</Text>,
    },
    {
      id: 'profile',
      label: 'Profile',
      description: 'Add details',
      content: <Text as="p">Profile content here.</Text>,
    },
    {
      id: 'review',
      label: 'Review',
      description: 'Confirm setup',
      content: <Text as="p">Review content here.</Text>,
    },
  ]}
/>

States

<Stepper
  activeStep="error"
  orientation="horizontal"
  steps={[ { id: 'completed', label: 'Completed', description: 'This step is done', isCompleted: true, }, { id: 'error', label: 'Error', description: 'Something went wrong', hasError: true, }, { id: 'disabled', label: 'Disabled', description: 'Cannot proceed yet', isDisabled: true, }, ]}
/>

Completed Override

<Stepper
  activeStep="one"
  orientation="horizontal"
  steps={[ {id: 'one', label: 'Step 1', description: 'Currently active'}, {id: 'two', label: 'Step 2', description: 'Skipped ahead'}, { id: 'three', label: 'Step 3', description: 'Marked complete manually', isCompleted: true, }, ]}
/>

All Completed

<Stepper
  activeStep="done"
  orientation="horizontal"
  steps={[ {id: 'account', label: 'Account', description: 'Done', isCompleted: true}, {id: 'profile', label: 'Profile', description: 'Done', isCompleted: true}, {id: 'review', label: 'Review', description: 'Done', isCompleted: true}, ]}
/>

Custom Icon

<Stepper
  activeStep="draft"
  orientation="horizontal"
  steps={[ { id: 'draft', label: 'Draft', icon: <Icon color="inherit" icon={FileText} size="sm" />, }, {id: 'review', label: 'Review'}, {id: 'publish', label: 'Publish'}, ]}
/>

Vertical With Form

<Stepper
  {...args}
  activeStep={activeStep}
  steps={[
    {
      id: 'account',
      label: 'Account',
      description: 'Enter your email',
      content: (
        <VStack gap={3} style={{maxWidth: 320, paddingBlock: 8}}>
          <TextInput label="Email" onChange={() => {}} value="" />
          <HStack gap={2}>
            <Button
              label="Next"
              onClick={() => setActiveStep('profile')}
              size="sm"
              variant="primary"
            />
          </HStack>
        </VStack>
      ),
    },
    {
      id: 'profile',
      label: 'Profile',
      description: 'Add your name',
      content: (
        <VStack gap={3} style={{maxWidth: 320, paddingBlock: 8}}>
          <TextInput label="Name" onChange={() => {}} value="" />
          <HStack gap={2}>
            <Button
              label="Back"
              onClick={() => setActiveStep('account')}
              size="sm"
              variant="ghost"
            />
            <Button
              label="Next"
              onClick={() => setActiveStep('review')}
              size="sm"
              variant="primary"
            />
          </HStack>
        </VStack>
      ),
    },
    {
      id: 'review',
      label: 'Review',
      description: 'Confirm details',
      content: (
        <VStack gap={3} style={{paddingBlock: 8}}>
          <Text as="p">Everything looks good!</Text>
          <HStack gap={2}>
            <Button
              label="Back"
              onClick={() => setActiveStep('profile')}
              size="sm"
              variant="ghost"
            />
            <Button label="Submit" size="sm" variant="primary" />
          </HStack>
        </VStack>
      ),
    },
  ]}
/>

Many Steps

<Stepper
  activeStep="qa"
  orientation="horizontal"
  steps={[ {id: 'requirements', label: 'Requirements gathering'}, {id: 'design', label: 'Design specifications'}, {id: 'implementation', label: 'Implementation details'}, {id: 'qa', label: 'Quality assurance testing'}, {id: 'staging', label: 'Staging deployment'}, {id: 'production', label: 'Production release'}, ]}
/>

API

Stepper

Displays progress through a sequence of logical steps.

Prop	Type	Default	Description
`activeStep`*	`string`	—	`id` of the active step. A step is completed when it appears before the active step in `steps`; pass an `id` that is not in `steps` (or mark steps `isCompleted`) to represent a fully finished sequence.
`className`	`string`	—	Additional CSS class names applied to the ordered list.
`data-testid`	`string`	—	Test ID applied to the ordered list.
`label`	`string`	`'Progress'`	Accessible label for the navigation landmark.
`onStepClick`	`(id: string) => void`	—	Called with the step `id` when a completed or active step indicator is clicked.
`orientation`	`"horizontal" \| "vertical"`	`'horizontal'`	Layout direction.
`ref`	`Ref<HTMLElement>`	—	Ref forwarded to the navigation element.
`steps`*	`StepConfig[]`	—	Ordered list of steps to render.
`style`	`CSSProperties`	—	Inline styles applied to the ordered list.