> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# MobileStepper

> A compact, mobile-friendly stepper that shows progress through a sequence of steps.

```tsx theme={null}
import { MobileStepper } from "@fanvue/ui";
import type {
  MobileStepperPosition,
  MobileStepperProps,
  MobileStepperVariant,
} from "@fanvue/ui";
```

## Examples

## Interactive

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-mobilestepper--interactive&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="MobileStepper — Interactive" />
</Frame>

```tsx theme={null}
import * as React from "react";
import { Button, MobileStepper } from "@fanvue/ui";

function InteractiveDemo() {
  const [activeStep, setActiveStep] = React.useState(0);
  const steps = 6;

  return (
    <MobileStepper
      steps={steps}
      activeStep={activeStep}
      variant="dots"
      backButton={
        <Button
          size="32"
          variant="tertiary"
          disabled={activeStep === 0}
          onClick={() => setActiveStep((prev) => prev - 1)}
        >
          Back
        </Button>
      }
      nextButton={
        <Button
          size="32"
          variant="tertiary"
          disabled={activeStep === steps - 1}
          onClick={() => setActiveStep((prev) => prev + 1)}
        >
          Next
        </Button>
      }
    />
  );
}

<InteractiveDemo />
```

## Text Custom Format

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-mobilestepper--text-custom-format&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="MobileStepper — Text Custom Format" />
</Frame>

```tsx theme={null}
import { Button, MobileStepper } from "@fanvue/ui";

<MobileStepper
  steps={6}
  activeStep={2}
  variant="text"
  formatText={(active, total) => `Step ${active} of ${total}`}
  backButton={<Button size="32" variant="tertiary">
    Back
  </Button>}
  nextButton={<Button size="32" variant="tertiary">
    Next
  </Button>}
/>
```

## Dots

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-mobilestepper--dots&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="MobileStepper — Dots" />
</Frame>

```tsx theme={null}
import { Button, MobileStepper } from "@fanvue/ui";

<MobileStepper
  steps={6}
  activeStep={2}
  variant="dots"
  backButton={<Button size="32" variant="tertiary">
    Back
  </Button>}
  nextButton={<Button size="32" variant="tertiary">
    Next
  </Button>}
/>
```

## Interactive Progress

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-mobilestepper--interactive-progress&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="MobileStepper — Interactive Progress" />
</Frame>

```tsx theme={null}
import * as React from "react";
import { Button, MobileStepper } from "@fanvue/ui";

function InteractiveProgressDemo() {
  const [activeStep, setActiveStep] = React.useState(0);
  const steps = 6;

  return (
    <MobileStepper
      steps={steps}
      activeStep={activeStep}
      variant="progress"
      backButton={
        <Button
          size="32"
          variant="tertiary"
          disabled={activeStep === 0}
          onClick={() => setActiveStep((prev) => prev - 1)}
        >
          Back
        </Button>
      }
      nextButton={
        <Button
          size="32"
          variant="tertiary"
          disabled={activeStep === steps - 1}
          onClick={() => setActiveStep((prev) => prev + 1)}
        >
          Next
        </Button>
      }
    />
  );
}

<InteractiveProgressDemo />
```

## Progress

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-mobilestepper--progress&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="MobileStepper — Progress" />
</Frame>

```tsx theme={null}
import { Button, MobileStepper } from "@fanvue/ui";

<MobileStepper
  steps={6}
  activeStep={2}
  variant="progress"
  backButton={<Button size="32" variant="tertiary">
    Back
  </Button>}
  nextButton={<Button size="32" variant="tertiary">
    Next
  </Button>}
/>
```

## Props

## MobileStepper

A compact, mobile-friendly stepper that shows progress through a sequence of steps. Supports three indicator variants: dots, a progress bar, or text.

<ParamField path="activeStep" type="number" required>
  Zero-indexed active step, clamped to `0` – `steps - 1`.
</ParamField>

<ParamField path="steps" type="number" required>
  Total number of steps.
</ParamField>

<ParamField path="ariaLabel" type="string" default="Progress">
  Accessible label for the stepper region.
</ParamField>

<ParamField path="backButton" type="ReactNode">
  Content rendered on the left (typically a "Back" button).
</ParamField>

<ParamField path="formatStepLabel" type="((activeStep: number, totalSteps: number) => string)" default={"(active, total) => `Step ${active} of ${total}`"}>
  Formatter for the `aria-valuetext` on dots and progress variants. Receives `(activeStep, totalSteps)` where `activeStep` is 1-indexed.
</ParamField>

<ParamField path="formatText" type="((activeStep: number, totalSteps: number) => string)" default={"(active, total) => `${active} / ${total}`"}>
  Custom formatter for the text variant. Receives `(activeStep, steps)` where `activeStep` is 1-indexed for display. Only used when `variant` is `"text"`.
</ParamField>

<ParamField path="nextButton" type="ReactNode">
  Content rendered on the right (typically a "Next" button).
</ParamField>

<ParamField path="position" type="&#x22;bottom&#x22; | &#x22;static&#x22;" default="static">
  Positioning mode.
</ParamField>

<ParamField path="stepProgressLabel" type="string" default="Step progress">
  Accessible label for the step progress indicator (dots/progress bar).
</ParamField>

<ParamField path="variant" type="&#x22;progress&#x22; | &#x22;text&#x22; | &#x22;dots&#x22;" default="dots">
  Step indicator style.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `MobileStepperPosition`, `MobileStepperProps`, `MobileStepperVariant`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)