> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Stepper

A horizontal row of numbered steps for a flow that is split into a few screens, such as a create drawer — it shows where the reader is and lets them jump to any step. It is compound, like Ark UI Steps: `count` on the root and `index` on every `StepperItem` and `StepperContent` are explicit. `StepperContent` shows the current step’s body, and `StepperPrevTrigger` / `StepperNextTrigger` move between steps; Next stops at the last step, where the page renders its own submit button. It never blocks a step: the page owns each step’s `status` (`completed`, `danger`, `upcoming`), and the current step always renders as active. Reach for `Timeline` for a history of events, `Tour` for guided onboarding, `Progress` for how far along a task is, and `Tabs` for sections that have no order.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Stepper) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/navigation-stepper--overview)

```tsx
import { Stepper, StepperIndicator, StepperItem, StepperList, StepperSeparator, StepperTitle, StepperTrigger } from '@wallarm-org/design-system/Stepper';

export const Basic = ({ count, ...args }) => (
  <Stepper data-testid='stepper' defaultStep={0} count={count}>
    <StepperList aria-label='Create policy steps'>
      {basicTitles(count).map((title, i) => (
        <StepperItem key={title} index={i}>
          <StepperTrigger>
            <StepperIndicator />
            <StepperTitle>{title}</StepperTitle>
          </StepperTrigger>
          <StepperSeparator />
        </StepperItem>
      ))}
    </StepperList>
  </Stepper>
);
```

## Usage

```tsx
import { Stepper, StepperIndicator, StepperItem, StepperList, StepperSeparator, StepperTitle, StepperTrigger } from '@wallarm-org/design-system/Stepper';
```

## Examples

### Step types

The four step types: the page sets `completed`, `danger` or `upcoming`, and the current step is
always active — a current `danger` step (Scope) shows as active too, since active is the only
step in brand.

```tsx
import { HStack, VStack } from '@wallarm-org/design-system/Stack';
import { Stepper, StepperIndicator, StepperItem, StepperList, StepperSeparator, StepperTitle, StepperTrigger } from '@wallarm-org/design-system/Stepper';

export const StepTypes = () => (
  <VStack gap={24}>
    <Stepper data-testid='stepper' count={TYPED_STEPS.length} step={2}>
      <StepperList aria-label='Create policy steps'>
        {TYPED_STEPS.map(({ title, status }, i) => (
          <StepperItem key={title} index={i} status={status}>
            <StepperTrigger>
              <StepperIndicator />
              <StepperTitle>{title}</StepperTitle>
            </StepperTrigger>
            <StepperSeparator />
          </StepperItem>
        ))}
      </StepperList>
    </Stepper>
    <HStack gap={32} align='center'>
      {STEP_TYPES.map(({ type, status }) => (
        <VStack key={type} gap={4} align='start'>
          {/* A lone step is always current, so the non-active types sit at index 1 of 2. */}
          <Stepper data-testid={`stepper-type-${type}`} count={type === 'active' ? 1 : 2} step={0}>
            <StepperList className={SINGLE_STEP_CLASSES} aria-label={`${type} step`}>
              <StepperItem index={type === 'active' ? 0 : 1} status={status}>
                <StepperTrigger>
                  <StepperIndicator />
                  <StepperTitle>Step</StepperTitle>
                </StepperTrigger>
                <StepperSeparator />
              </StepperItem>
            </StepperList>
          </Stepper>
        </VStack>
      ))}
    </HStack>
  </VStack>
);
```

### With description

An optional second line under the title; the separator stays on the first row.

```tsx
import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperSeparator, StepperTitle, StepperTrigger } from '@wallarm-org/design-system/Stepper';

export const WithDescription = () => (
  <Stepper data-testid='stepper' count={DESCRIBED_STEPS.length} defaultStep={1}>
    <StepperList aria-label='Create policy steps'>
      {DESCRIBED_STEPS.map(({ title, description, status }, i) => (
        <StepperItem key={title} index={i} status={status}>
          <StepperTrigger>
            <StepperIndicator />
            <StepperTitle>{title}</StepperTitle>
            {description && <StepperDescription>{description}</StepperDescription>}
          </StepperTrigger>
          <StepperSeparator />
        </StepperItem>
      ))}
    </StepperList>
  </Stepper>
);
```

### Navigation

Controlled with `step` and `onStepChange`; every step is clickable, back and forward.

```tsx
import { useState } from 'react';
import { VStack } from '@wallarm-org/design-system/Stack';
import { Stepper, StepperIndicator, StepperItem, StepperList, StepperSeparator, StepperTitle, StepperTrigger } from '@wallarm-org/design-system/Stepper';

export const Navigation = () => {
  const [step, setStep] = useState(0);
  return (
    <VStack gap={16}>
      <Stepper
        data-testid='stepper'
        count={POLICY_STEPS.length}
        step={step}
        onStepChange={details => setStep(details.step)}
      >
        <StepperList aria-label='Create policy steps'>
          {POLICY_STEPS.map((title, i) => (
            <StepperItem key={title} index={i}>
              <StepperTrigger>
                <StepperIndicator />
                <StepperTitle>{title}</StepperTitle>
              </StepperTrigger>
              <StepperSeparator />
            </StepperItem>
          ))}
        </StepperList>
      </Stepper>
    </VStack>
  );
};
```

### In drawer

Inside a create drawer: the step list sits under the header, `StepperContent` shows the current
step's body (every body stays mounted, so fields keep their values) and the footer moves with
Back / Next. Steps never submit the form; only the last step's own submit button does. Focus
stays on the footer when Back or Next unmounts. The list sits directly below the header,
with 24px side insets, 12px bottom padding and no divider. Drawer parts inside the `Stepper`
root take its test ids (`stepper--body`, `stepper--footer`), not the Drawer's.

```tsx
import { type FormEvent, useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerTitle, DrawerTrigger } from '@wallarm-org/design-system/Drawer';
import { Stepper, StepperContent, StepperIndicator, StepperItem, StepperList, StepperNextTrigger, StepperPrevTrigger, StepperSeparator, StepperTitle, StepperTrigger } from '@wallarm-org/design-system/Stepper';

export const InDrawer = () => {
  const { step, statuses, goTo } = usePolicyFlow();
  const { nextRef, submitRef, onBackClick, onNextClick } = useFooterFocus(step);
  const [submitted, setSubmitted] = useState(0);
  const last = step === POLICY_STEPS.length - 1;
  const onSubmit = (event: FormEvent) => {
    event.preventDefault();
    setSubmitted(n => n + 1);
  };
  return (
    <Drawer data-testid='drawer' width={640}>
      <DrawerTrigger asChild>
        <Button variant='outline' color='neutral' data-testid='drawer-open'>
          Create policy
        </Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Create policy</DrawerTitle>
        </DrawerHeader>
        <form onSubmit={onSubmit} className='flex min-h-0 flex-1 flex-col'>
          <Stepper
            data-testid='stepper'
            count={POLICY_STEPS.length}
            step={step}
            onStepChange={details => goTo(details.step)}
            className='flex min-h-0 flex-1 flex-col'
          >
            <StepperList aria-label='Create policy steps'>
              {POLICY_STEPS.map((title, i) => (
                <StepperItem key={title} index={i} status={statuses[i]}>
                  <StepperTrigger>
                    <StepperIndicator />
                    <StepperTitle>{title}</StepperTitle>
                  </StepperTrigger>
                  <StepperSeparator />
                </StepperItem>
              ))}
            </StepperList>
            <DrawerBody>
              {POLICY_STEPS.map((title, i) => (
                <StepperContent key={title} index={i} className='py-16'>
                  <BodyPlaceholder label={`${title} fields`} />
                </StepperContent>
              ))}
            </DrawerBody>
            <DrawerFooter>
              {step > 0 && (
                <DrawerFooterControls placement='left'>
                  <StepperPrevTrigger asChild onClick={onBackClick}>
                    <Button variant='outline' color='neutral' size='large'>
                      Back
                    </Button>
                  </StepperPrevTrigger>
                </DrawerFooterControls>
              )}
              <DrawerFooterControls placement='right'>
                {last ? (
                  <Button
                    ref={submitRef}
                    type='submit'
                    variant='primary'
                    color='brand'
                    size='large'
                  >
                    Create policy
                  </Button>
                ) : (
                  <StepperNextTrigger asChild onClick={onNextClick}>
                    <Button ref={nextRef} variant='primary' color='brand' size='large'>
                      Next: {POLICY_STEPS[step + 1]}
                    </Button>
                  </StepperNextTrigger>
                )}
              </DrawerFooterControls>
            </DrawerFooter>
          </Stepper>
        </form>
      </DrawerContent>
    </Drawer>
  );
};
```

### Long label

A title over 320px ellipsizes, with the full text in a tooltip on hover; so does a long description.

```tsx
import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperSeparator, StepperTitle, StepperTrigger } from '@wallarm-org/design-system/Stepper';

export const LongLabel = () => (
  <Stepper data-testid='stepper' count={3} defaultStep={0}>
    <StepperList aria-label='Create policy steps'>
      <StepperItem index={0}>
        <StepperTrigger>
          <StepperIndicator />
          <StepperTitle>General</StepperTitle>
        </StepperTrigger>
        <StepperSeparator />
      </StepperItem>
      <StepperItem index={1} data-testid='stepper-long'>
        <StepperTrigger>
          <StepperIndicator />
          <StepperTitle>
            Rules applied to every request that matches the selected application and path
          </StepperTitle>
          <StepperDescription>
            Request · Lua · HMAC auth · Response headers · Rate limit · Custom blocking page
          </StepperDescription>
        </StepperTrigger>
        <StepperSeparator />
      </StepperItem>
      <StepperItem index={2}>
        <StepperTrigger>
          <StepperIndicator />
          <StepperTitle>Review</StepperTitle>
        </StepperTrigger>
        <StepperSeparator />
      </StepperItem>
    </StepperList>
  </Stepper>
);
```

### Six steps

Six steps, the most the design supports — at full width, then in a 640px drawer where titles truncate earlier.

```tsx
import { VStack } from '@wallarm-org/design-system/Stack';

export const SixSteps = () => (
  <VStack gap={24}>
    <SixStepStepper testId='stepper' />
    <div className='w-640'>
      <SixStepStepper testId='stepper-narrow' />
    </div>
  </VStack>
);
```

### With footer

The footer recipe: `StepperPrevTrigger` on the left (hidden on the first step) and
`StepperNextTrigger` as `Next: <destination>` on the right, both `asChild` with a `Button`. On
the last step the page renders its own submit button instead: Next is disabled there. When
Back or Next unmounts under the keyboard, the page moves focus to the right-hand footer button
(`useFooterFocus` here), so it never falls to `<body>`.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { DrawerFooter, DrawerFooterControls } from '@wallarm-org/design-system/Drawer';
import { Stepper, StepperContent, StepperIndicator, StepperItem, StepperList, StepperNextTrigger, StepperPrevTrigger, StepperSeparator, StepperTitle, StepperTrigger } from '@wallarm-org/design-system/Stepper';

export const WithFooter = () => {
  const { step, statuses, goTo } = usePolicyFlow();
  const { nextRef, submitRef, onBackClick, onNextClick } = useFooterFocus(step);
  const last = step === POLICY_STEPS.length - 1;
  return (
    <form
      onSubmit={event => event.preventDefault()}
      className='flex w-640 flex-col overflow-hidden rounded-12 border-1 border-border-primary-light'
    >
      <Stepper
        data-testid='stepper'
        count={POLICY_STEPS.length}
        step={step}
        onStepChange={details => goTo(details.step)}
      >
        <StepperList aria-label='Create policy steps'>
          {POLICY_STEPS.map((title, i) => (
            <StepperItem key={title} index={i} status={statuses[i]}>
              <StepperTrigger>
                <StepperIndicator />
                <StepperTitle>{title}</StepperTitle>
              </StepperTrigger>
              <StepperSeparator />
            </StepperItem>
          ))}
        </StepperList>
        {POLICY_STEPS.map((title, i) => (
          <StepperContent key={title} index={i} className='px-24 py-16'>
            <BodyPlaceholder label={`${title} fields`} />
          </StepperContent>
        ))}
        <DrawerFooter>
          {step > 0 && (
            <DrawerFooterControls placement='left'>
              <StepperPrevTrigger asChild data-testid='stepper-back' onClick={onBackClick}>
                <Button variant='outline' color='neutral' size='large'>
                  Back
                </Button>
              </StepperPrevTrigger>
            </DrawerFooterControls>
          )}
          <DrawerFooterControls placement='right'>
            {last ? (
              <Button
                ref={submitRef}
                type='submit'
                variant='primary'
                color='brand'
                size='large'
                data-testid='stepper-submit'
              >
                Create policy
              </Button>
            ) : (
              <StepperNextTrigger asChild data-testid='stepper-next' onClick={onNextClick}>
                <Button ref={nextRef} variant='primary' color='brand' size='large'>
                  Next: {POLICY_STEPS[step + 1]}
                </Button>
              </StepperNextTrigger>
            )}
          </DrawerFooterControls>
        </DrawerFooter>
      </Stepper>
    </form>
  );
};
```

### Custom indicator

`children` on `StepperIndicator` replaces the number, `!` or check, here with an icon on a locked step.

```tsx
import { Lock } from '@wallarm-org/design-system/icons';
import { Stepper, StepperIndicator, StepperItem, StepperList, StepperSeparator, StepperTitle, StepperTrigger } from '@wallarm-org/design-system/Stepper';

export const CustomIndicator = () => (
  <Stepper data-testid='stepper' count={3} defaultStep={0}>
    <StepperList aria-label='Create policy steps'>
      {['General', 'Rules', 'Billing'].map((title, i) => (
        <StepperItem key={title} index={i}>
          <StepperTrigger>
            <StepperIndicator>{i === 2 ? <Lock size='sm' /> : undefined}</StepperIndicator>
            <StepperTitle>{title}</StepperTitle>
          </StepperTrigger>
          <StepperSeparator />
        </StepperItem>
      ))}
    </StepperList>
  </Stepper>
);
```

### Analytics and test ids

`data-analytics-id` and `data-analytics-props` land on each step's button and on the Back / Next
buttons, and `data-testid` cascades from the root (`{id}--item-{index}--trigger`) unless a part
sets its own.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';
import { Stepper, StepperIndicator, StepperItem, StepperList, StepperNextTrigger, StepperPrevTrigger, StepperSeparator, StepperTitle, StepperTrigger } from '@wallarm-org/design-system/Stepper';

export const AnalyticsAndTestIds = () => (
  <VStack gap={16}>
    <Stepper data-testid='stepper' count={POLICY_STEPS.length} defaultStep={1}>
      <StepperList aria-label='Create policy steps'>
        {ANALYTICS_STEPS.map(({ title, analyticsId, analyticsProps, testId }, i) => (
          <StepperItem key={title} index={i}>
            <StepperTrigger
              data-analytics-id={analyticsId}
              data-analytics-props={analyticsProps}
              {...(testId === 'step-review' && { 'data-testid': testId })}
            >
              <StepperIndicator />
              <StepperTitle>{title}</StepperTitle>
            </StepperTrigger>
            <StepperSeparator />
          </StepperItem>
        ))}
      </StepperList>
      <HStack gap={8} className='px-24 py-16'>
        <StepperPrevTrigger asChild data-analytics-id='POLICY_STEP_BACK'>
          <Button variant='outline' color='neutral'>
            Back
          </Button>
        </StepperPrevTrigger>
        <StepperNextTrigger asChild data-analytics-id='POLICY_STEP_NEXT'>
          <Button>Next</Button>
        </StepperNextTrigger>
      </HStack>
    </Stepper>
    <VStack gap={4} align='start'>
      {ANALYTICS_STEPS.map(({ title, analyticsId, analyticsProps, testId }) => (
        <span key={title} className='sb-annotation'>
          {`<button> data-testid="${testId}" data-analytics-id="${analyticsId}" data-analytics-props='${analyticsProps}'`}
        </span>
      ))}
    </VStack>
  </VStack>
);
```

## Props

| Prop           | Type                                                  | Default | Description                                                                                                                                                            |
| -------------- | ----------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| statusLabels   | `StepperStatusLabels \| undefined`                    |         | Screen-reader-only suffixes for completed and danger steps.                                                                                                            |
| title          | `string \| undefined`                                 |         |                                                                                                                                                                        |
| defaultChecked | `boolean \| undefined`                                |         |                                                                                                                                                                        |
| defaultValue   | `string \| number \| readonly string[] \| undefined`  |         |                                                                                                                                                                        |
| autoFocus      | `boolean \| undefined`                                |         |                                                                                                                                                                        |
| id             | `string \| undefined`                                 |         |                                                                                                                                                                        |
| tabIndex       | `number \| undefined`                                 |         |                                                                                                                                                                        |
| rel            | `string \| undefined`                                 |         |                                                                                                                                                                        |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`         |         |                                                                                                                                                                        |
| ids            | `ElementIds \| undefined`                             |         | The custom ids for the stepper elements                                                                                                                                |
| count \*       | `number`                                              |         | Number of steps, 1–6. Required: each `StepperItem` and `StepperContent` takes its `index`.                                                                             |
| step           | `number \| undefined`                                 |         | Controlled current step, 0-based. Clamped to `[0, count - 1]`.                                                                                                         |
| defaultStep    | `number \| undefined`                                 |         | Uncontrolled initial step. Default `0`. Clamped to `[0, count - 1]`.                                                                                                   |
| onStepChange   | `((details: StepChangeDetails) => void) \| undefined` |         | Fires when a click changes the step, back or forward: `({ step }) => void`. A click on the current step does not fire it; use the trigger's `onClick` to observe that. |
| data-testid    | `string \| undefined`                                 |         |                                                                                                                                                                        |

### StepperContent

| Prop           | Type                                                 | Default | Description                        |
| -------------- | ---------------------------------------------------- | ------- | ---------------------------------- |
| index \*       | `number`                                             |         | 0-based step this body belongs to. |
| defaultChecked | `boolean \| undefined`                               |         |                                    |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |                                    |
| autoFocus      | `boolean \| undefined`                               |         |                                    |
| id             | `string \| undefined`                                |         |                                    |
| tabIndex       | `number \| undefined`                                |         |                                    |
| title          | `string \| undefined`                                |         |                                    |
| rel            | `string \| undefined`                                |         |                                    |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |                                    |
| data-testid    | `string \| undefined`                                |         |                                    |

### StepperDescription

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |

### StepperIndicator

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |

### StepperItem

| Prop           | Type                                                 | Default | Description                                                                                |
| -------------- | ---------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------ |
| index \*       | `number`                                             |         | 0-based position of this step. Required, like Ark's `Steps.Item`.                          |
| status         | `StepperItemStatus \| undefined`                     |         | Status set by the page. Ignored while this item is the current step. Default `'upcoming'`. |
| statusLabel    | `string \| undefined`                                |         | Overrides the root `statusLabels` suffix for this item.                                    |
| value          | `string \| number \| readonly string[] \| undefined` |         |                                                                                            |
| defaultChecked | `boolean \| undefined`                               |         |                                                                                            |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |                                                                                            |
| autoFocus      | `boolean \| undefined`                               |         |                                                                                            |
| id             | `string \| undefined`                                |         |                                                                                            |
| tabIndex       | `number \| undefined`                                |         |                                                                                            |
| title          | `string \| undefined`                                |         |                                                                                            |
| rel            | `string \| undefined`                                |         |                                                                                            |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                                            |
| data-testid    | `string \| undefined`                                |         |                                                                                            |

### StepperList

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| type           | `"a" \| "i" \| "1" \| "A" \| "I" \| undefined`       |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |

### StepperNextTrigger

| Prop           | Type                                                 | Default | Description                                                                      |
| -------------- | ---------------------------------------------------- | ------- | -------------------------------------------------------------------------------- |
| asChild        | `boolean \| undefined`                               |         | Render the child (e.g. a `Button`) as the trigger instead of a plain `<button>`. |
| disabled       | `boolean \| undefined`                               |         |                                                                                  |
| name           | `string \| undefined`                                |         |                                                                                  |
| type           | `"button" \| "submit" \| "reset" \| undefined`       |         |                                                                                  |
| value          | `string \| number \| readonly string[] \| undefined` |         |                                                                                  |
| defaultChecked | `boolean \| undefined`                               |         |                                                                                  |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |                                                                                  |
| autoFocus      | `boolean \| undefined`                               |         |                                                                                  |
| id             | `string \| undefined`                                |         |                                                                                  |
| tabIndex       | `number \| undefined`                                |         |                                                                                  |
| title          | `string \| undefined`                                |         |                                                                                  |
| rel            | `string \| undefined`                                |         |                                                                                  |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                                  |
| data-testid    | `string \| undefined`                                |         |                                                                                  |

### StepperPrevTrigger

| Prop           | Type                                                 | Default | Description                                                                      |
| -------------- | ---------------------------------------------------- | ------- | -------------------------------------------------------------------------------- |
| asChild        | `boolean \| undefined`                               |         | Render the child (e.g. a `Button`) as the trigger instead of a plain `<button>`. |
| disabled       | `boolean \| undefined`                               |         |                                                                                  |
| name           | `string \| undefined`                                |         |                                                                                  |
| type           | `"button" \| "submit" \| "reset" \| undefined`       |         |                                                                                  |
| value          | `string \| number \| readonly string[] \| undefined` |         |                                                                                  |
| defaultChecked | `boolean \| undefined`                               |         |                                                                                  |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |                                                                                  |
| autoFocus      | `boolean \| undefined`                               |         |                                                                                  |
| id             | `string \| undefined`                                |         |                                                                                  |
| tabIndex       | `number \| undefined`                                |         |                                                                                  |
| title          | `string \| undefined`                                |         |                                                                                  |
| rel            | `string \| undefined`                                |         |                                                                                  |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                                  |
| data-testid    | `string \| undefined`                                |         |                                                                                  |

### StepperRootProvider

| Prop           | Type                                                 | Default | Description                                                                    |
| -------------- | ---------------------------------------------------- | ------- | ------------------------------------------------------------------------------ |
| value \*       | `complex`                                            |         | The machine from `useStepper()`, so the page can drive the steps from outside. |
| statusLabels   | `StepperStatusLabels \| undefined`                   |         | Screen-reader-only suffixes for completed and danger steps.                    |
| title          | `string \| undefined`                                |         |                                                                                |
| defaultChecked | `boolean \| undefined`                               |         |                                                                                |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |                                                                                |
| autoFocus      | `boolean \| undefined`                               |         |                                                                                |
| id             | `string \| undefined`                                |         |                                                                                |
| tabIndex       | `number \| undefined`                                |         |                                                                                |
| rel            | `string \| undefined`                                |         |                                                                                |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                                |
| data-testid    | `string \| undefined`                                |         |                                                                                |

### StepperSeparator

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title          | `string \| undefined`                                |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |

### StepperTitle

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |

### StepperTrigger

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title          | `string \| undefined`                                |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| disabled       | `boolean \| undefined`                               |         |             |
| name           | `string \| undefined`                                |         |             |
| value          | `string \| number \| readonly string[] \| undefined` |         |             |
| data-testid    | `string \| undefined`                                |         |             |

## Explorer