Stepper

Display content divided into a steps sequence

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Step 2 content: Verify email

import { useState } from 'react';
import { Stepper, Button, Group } from '@mantine/core';

function Demo() {
  const [active, setActive] = useState(1);
  const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current));
  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));

  return (
    <>
      <Stepper active={active} onStepClick={setActive} breakpoint="sm">
        <Stepper.Step label="First step" description="Create an account">
          Step 1 content: Create an account
        </Stepper.Step>
        <Stepper.Step label="Second step" description="Verify email">
          Step 2 content: Verify email
        </Stepper.Step>
        <Stepper.Step label="Final step" description="Get full access">
          Step 3 content: Get full access
        </Stepper.Step>
        <Stepper.Completed>
          Completed, click back button to get to previous step
        </Stepper.Completed>
      </Stepper>

      <Group position="center" mt="xl">
        <Button variant="default" onClick={prevStep}>Back</Button>
        <Button onClick={nextStep}>Next step</Button>
      </Group>
    </>
  );
}

Allow step select

To disable step selection set allowStepSelect prop on Stepper.Step component. It can be used to prevent user from reaching next steps:

Step 2 content: Verify email

import { useState } from 'react';
import { Stepper, Button, Group } from '@mantine/core';

function Demo() {
  const [active, setActive] = useState(1);
  const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current));
  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));

  return (
    <>
      <Stepper active={active} onStepClick={setActive} breakpoint="sm">
        <Stepper.Step label="First step" description="Create an account" allowStepSelect={active > 0}>
          Step 1 content: Create an account
        </Stepper.Step>
        <Stepper.Step label="Second step" description="Verify email" allowStepSelect={active > 1}>
          Step 2 content: Verify email
        </Stepper.Step>
        <Stepper.Step label="Final step" description="Get full access" allowStepSelect={active > 2}>
          Step 3 content: Get full access
        </Stepper.Step>
        <Stepper.Completed>
          Completed, click back button to get to previous step
        </Stepper.Completed>
      </Stepper>

      <Group position="center" mt="xl">
        <Button variant="default" onClick={prevStep}>Back</Button>
        <Button onClick={nextStep}>Next step</Button>
      </Group>
    </>
  );
}

Color, radius and size

You can use any color from theme.colors, by default Stepper will use theme.primaryColor:

Color

Radius

Size

import { Stepper } from '@mantine/core';

function Demo() {
  return (
    <Stepper size="md" active={1}>
      <Stepper.Step label="Step 1" description="Create an account" />
      <Stepper.Step label="Step 2" description="Verify email" />
    </Stepper>
  );
}

Component size is controlled by two props: size and iconSize. size prop controls icon size, label and description font size. iconSize allows to overwrite icon size separately from other size values:

IconSize

import { Stepper } from '@mantine/core';

function Demo() {
  return (
    <Stepper iconSize={42} active={1}>
      <Stepper.Step label="Step 1" description="Create an account" />
      <Stepper.Step label="Step 2" description="Verify email" />
    </Stepper>
  );
}

With custom icons

You can replace step icon by setting icon prop on Step component. To change completed check icon set completedIcon on Stepper component. You can use any React node as icon: component, string, number:

import { useState } from 'react';
import { UserCheck, MailOpened, ShieldCheck, CircleCheck } from 'tabler-icons-react';
import { Stepper } from '@mantine/core';

function Demo() {
  const [active, setActive] = useState(1);

  return (
    <Stepper active={active} onStepClick={setActive} completedIcon={<CircleCheck />}>
      <Stepper.Step icon={<UserCheck size={18} />} label="Step 1" description="Create an account" />
      <Stepper.Step icon={<MailOpened size={18} />} label="Step 2" description="Verify email" />
      <Stepper.Step icon={<ShieldCheck size={18} />} label="Step 3" description="Get full access" />
    </Stepper>
  );
}

You can use Stepper with icons only. Note that in this case you will have to set aria-label or title on Step component to make it accessible:

import { useState } from 'react';
import { Stepper } from '@mantine/core';
import { UserCheck, MailOpened, ShieldCheck } from 'tabler-icons-react';

function Demo() {
  const [active, setActive] = useState(0);

  return (
    <Stepper active={active} onStepClick={setActive}>
      <Stepper.Step icon={<UserCheck size={18} />} />
      <Stepper.Step icon={<MailOpened size={18} />} />
      <Stepper.Step icon={<ShieldCheck size={18} />} />
    </Stepper>
  );
}

You can also change completed icon for each step, for example, to indicate error state:

import { Stepper } from '@mantine/core';
import { CircleX } from 'tabler-icons-react';

function Demo() {
  return (
    <Stepper active={2} breakpoint="sm">
      <Stepper.Step label="Step 1" description="Create an account" />
      <Stepper.Step
        label="Step 2"
        description="Verify email"
        color="red"
        completedIcon={<CircleX />}
      />
      <Stepper.Step label="Step 3" description="Get full access" />
    </Stepper>
  );
}

Vertical orientation

import { useState } from 'react';
import { Stepper } from '@mantine/core';

function Demo() {
  const [active, setActive] = useState(1);

  return (
    <Stepper active={active} onStepClick={setActive} orientation="vertical">
      <Stepper.Step label="Step 1" description="Create an account" />
      <Stepper.Step label="Step 2" description="Verify email" />
      <Stepper.Step label="Step 3" description="Get full access" />
    </Stepper>
  );
}

Responsive styles

To change orientation based on viewport size set breakpoint prop. In following example stepper will have horizontal orientation when viewport width is more than theme.breakpoints.md:

<Stepper breakpoint="md">{/* ...steps */}</Stepper>

You can configure breakpoints in MantineProvider or use number to set breakpoint in px:

<Stepper breakpoint={755}>{/* ...steps */}</Stepper>

Icon position

To change step icon and body arrangement set iconPosition to right, this option is most useful for RTL:

import { useState } from 'react';
import { Stepper } from '@mantine/core';

function Demo() {
  const [active, setActive] = useState(1);

  return (
    <Stepper active={active} breakpoint="sm" onStepClick={setActive} iconPosition="right">
      <Stepper.Step label="Step 1" description="Create an account" />
      <Stepper.Step label="Step 2" description="Verify email" />
      <Stepper.Step label="Step 3" description="Get full access" />
    </Stepper>
  );
}

Loading state

To indicate loading state set loading prop on Step component, Loader will replace step icon. You can configure default loader in MantineProvider.

import { Stepper } from '@mantine/core';

function Demo() {
  return (
    <Stepper active={1} breakpoint="sm">
      <Stepper.Step label="Step 1" description="Create an account" />
      <Stepper.Step label="Step 2" description="Verify email" loading />
      <Stepper.Step label="Step 3" description="Get full access" />
    </Stepper>
  );
}

Customize with Styles API

You can change Stepper styles using Styles API

Get step ref

You can get refs of step button and stepper root element (div):

import { useRef } from 'react';
import { Stepper } from '@mantine/core';

function MyStepper() {
  const firstStep = useRef<HTMLButtonElement>();
  const stepper = useRef<HTMLDivElement>();

  return (
    <Stepper ref={stepper} active={0}>
      <Stepper.Step label="First step" ref={firstStep} />
      <Stepper.Step label="Second step" />
    </Stepper>
  );
}

Accessibility

<Stepper.Step /> components render button element, set aria-label or title props to make component visible for screen readers in case you do not specify label or description:

<Stepper.Step /> // -> not ok, empty labels for screen reader
<Stepper.Step label="Step 1" description="Create an account" /> // -> ok
<Stepper.Step aria-label="Create an account" /> // -> ok
<Stepper.Step title="Create an account" /> // -> ok

Go back

Pagination – @mantine/core

Up next

Tabs – @mantine/core

Build fully functional accessible web applications faster than ever

About

Contribute Media assets Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter