Stepper API - React Magma

Stepper displays progressional multi-step content.

Basic Usage

The Stepper consists of two components, the Stepper which acts like a wrapper and Step that houses an optional label, and secondaryLabel.

Throughout the series of Steps, the prop currentStep sets the appropriate styling between incomplete, active, and complete.

import React from 'react';

import {
  Container,
  Heading,
  Stepper,
  Step,
  Button,
  ButtonGroup,
} from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(0);

  const handleOnNext = () => {
    if (currentStep !== 4) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep === 4) {
      setCurrentStep(0);
    }
  };

  return (
    <>
      <Heading level={4} style={{ textAlign: 'center' }}>
        Course Selector
      </Heading>
      <Stepper ariaLabel="progress" currentStep={currentStep}>
        <Step label="Choose materials" />
        <Step label="Additional details" />
        <Step label="Confirm" />
        <Step label="Finish" />
      </Stepper>

      <Container
        style={{
          background: '#F5F5F5',
          borderRadius: '6px',
          margin: '20px 0 0',
          padding: '20px',
        }}
      >
        {currentStep === 0 && <div>Step Content One</div>}
        {currentStep === 1 && <div>Step Content Two</div>}
        {currentStep === 2 && <div>Step Content Three</div>}
        {currentStep === 3 && <div>Step Content Four</div>}
        {currentStep === 4 && <div>Steps Completed</div>}
      </Container>

      <Container style={{ padding: '20px 0' }}>
        <ButtonGroup>
          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
            Previous
          </Button>
          <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
            {currentStep >= 4 ? 'Finish' : 'Next'}
          </Button>
        </ButtonGroup>
      </Container>
    </>
  );
}

Step label

When using layout with StepperLayout.summaryView, the option to change the step label may be done with the stepLabel which takes a string and replaces the default "Step" label.

import React from 'react';

import {
  Container,
  Stepper,
  Step,
  StepperLayout,
  Button,
  ButtonGroup,
} from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(0);

  const handleOnNext = () => {
    if (currentStep !== 3) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep >= 3) {
      setCurrentStep(0);
    }
  };

  return (
    <>
      <Stepper
        ariaLabel="progress"
        layout={StepperLayout.summaryView}
        currentStep={currentStep}
        stepLabel="Module"
      >
        <Step label="First Step" secondaryLabel="Description One" />
        <Step label="Second Step" secondaryLabel="Description Two" />
        <Step label="Third Step" secondaryLabel="Description Three" />
      </Stepper>

      <Container
        style={{
          background: '#F5F5F5',
          borderRadius: '6px',
          margin: '20px 0 0',
          padding: '20px',
        }}
      >
        {currentStep === 0 && <div>Step Content One</div>}
        {currentStep === 1 && <div>Step Content Two</div>}
        {currentStep === 2 && <div>Step Content Three</div>}
      </Container>

      <Container style={{ padding: '20px 0' }}>
        <ButtonGroup>
          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
            Previous
          </Button>
          <Button onClick={currentStep >= 3 ? handleFinish : handleOnNext}>
            {currentStep >= 3 ? 'Finish' : 'Next'}
          </Button>
        </ButtonGroup>
      </Container>
    </>
  );
}

Completion Label

When using layout StepperLayout.summaryView, after all of the steps are complete, the completionLabel prop takes a string and changes the title.

import React from 'react';

import {
  Container,
  Stepper,
  Step,
  StepperLayout,
  Button,
  ButtonGroup,
} from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(4);

  const handleOnNext = () => {
    if (currentStep !== 4) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep === 4) {
      setCurrentStep(0);
    }
  };

  return (
    <>
      <Stepper
        ariaLabel="progress"
        completionLabel="Steps Complete!"
        layout={StepperLayout.summaryView}
        currentStep={currentStep}
      >
        <Step label="First Step" secondaryLabel="Description One" />
        <Step label="Second Step" secondaryLabel="Description Two" />
        <Step label="Third Step" secondaryLabel="Description Three" />
        <Step label="Fourth Step" secondaryLabel="Description Four" />
      </Stepper>

      <Container
        style={{
          background: '#F5F5F5',
          borderRadius: '6px',
          margin: '20px 0 0',
          padding: '20px',
        }}
      >
        {currentStep === 0 && <div>Step Content One</div>}
        {currentStep === 1 && <div>Step Content Two</div>}
        {currentStep === 2 && <div>Step Content Three</div>}
        {currentStep === 3 && <div>Step Content Four</div>}
        {currentStep === 4 && <div>Steps Completed</div>}
      </Container>

      <Container style={{ padding: '20px 0' }}>
        <ButtonGroup>
          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
            Previous
          </Button>
          <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
            {currentStep >= 4 ? 'Finish' : 'Next'}
          </Button>
        </ButtonGroup>
      </Container>
    </>
  );
}

Aria Label

For proper accessibility usage, the ariaLabel prop takes a string to idenitify the Stepper to screenreaders appropriately.

import React from 'react';

import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(4);

  const handleOnNext = () => {
    if (currentStep !== 4) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep === 4) {
      setCurrentStep(0);
    }
  };

  return (
    <>
      <Stepper ariaLabel="progress" currentStep={currentStep}>
        <Step label="First Step" secondaryLabel="Description One" />
        <Step label="Second Step" secondaryLabel="Description Two" />
        <Step label="Third Step" secondaryLabel="Description Three" />
        <Step label="Fourth Step" secondaryLabel="Description Four" />
      </Stepper>

      <Container
        style={{
          background: '#F5F5F5',
          borderRadius: '6px',
          margin: '20px 0 0',
          padding: '20px',
        }}
      >
        {currentStep === 0 && <div>Step Content One</div>}
        {currentStep === 1 && <div>Step Content Two</div>}
        {currentStep === 2 && <div>Step Content Three</div>}
        {currentStep === 3 && <div>Step Content Four</div>}
        {currentStep === 4 && <div>Steps Completed</div>}
      </Container>

      <Container style={{ padding: '20px 0' }}>
        <ButtonGroup>
          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
            Previous
          </Button>
          <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
            {currentStep >= 4 ? 'Finish' : 'Next'}
          </Button>
        </ButtonGroup>
      </Container>
    </>
  );
}

Layout

For alternative layouts, the layout prop hides either labels or shows just the summary view. By default, step labels will display if layout isn't used.

Layout - Hide Labels

import React from 'react';

import {
  StepperLayout,
  Container,
  Stepper,
  Step,
  Button,
  ButtonGroup,
} from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(0);

  const handleOnNext = () => {
    if (currentStep !== 4) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep === 4) {
      setCurrentStep(0);
    }
  };

  return (
    <>
      <Stepper
        ariaLabel="progress"
        layout={StepperLayout.hideLabels}
        currentStep={currentStep}
      >
        <Step label="First Step" secondaryLabel="Description One" />
        <Step label="Second Step" secondaryLabel="Description Two" />
        <Step label="Third Step" secondaryLabel="Description Three" />
        <Step label="Fourth Step" secondaryLabel="Description Four" />
      </Stepper>

      <Container
        style={{
          background: '#F5F5F5',
          borderRadius: '6px',
          margin: '20px 0 0',
          padding: '20px',
        }}
      >
        {currentStep === 0 && <div>Step Content One</div>}
        {currentStep === 1 && <div>Step Content Two</div>}
        {currentStep === 2 && <div>Step Content Three</div>}
        {currentStep === 3 && <div>Step Content Four</div>}
        {currentStep === 4 && <div>Steps Completed</div>}
      </Container>

      <Container style={{ padding: '20px 0' }}>
        <ButtonGroup>
          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
            Previous
          </Button>
          <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
            {currentStep >= 4 ? 'Finish' : 'Next'}
          </Button>
        </ButtonGroup>
      </Container>
    </>
  );
}

Layout - Show Labels

import React from 'react';

import {
  StepperLayout,
  Container,
  Stepper,
  Step,
  Button,
  ButtonGroup,
} from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(0);

  const handleOnNext = () => {
    if (currentStep !== 4) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep === 4) {
      setCurrentStep(0);
    }
  };

  return (
    <>
      <Stepper
        ariaLabel="progress"
        layout={StepperLayout.showLabels}
        currentStep={currentStep}
      >
        <Step label="First Step" secondaryLabel="Description One" />
        <Step label="Second Step" secondaryLabel="Description Two" />
        <Step label="Third Step" secondaryLabel="Description Three" />
        <Step label="Fourth Step" secondaryLabel="Description Four" />
      </Stepper>

      <Container
        style={{
          background: '#F5F5F5',
          borderRadius: '6px',
          margin: '20px 0 0',
          padding: '20px',
        }}
      >
        {currentStep === 0 && <div>Step Content One</div>}
        {currentStep === 1 && <div>Step Content Two</div>}
        {currentStep === 2 && <div>Step Content Three</div>}
        {currentStep === 3 && <div>Step Content Four</div>}
        {currentStep === 4 && <div>Steps Completed</div>}
      </Container>

      <Container style={{ padding: '20px 0' }}>
        <ButtonGroup>
          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
            Previous
          </Button>
          <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
            {currentStep >= 4 ? 'Finish' : 'Next'}
          </Button>
        </ButtonGroup>
      </Container>
    </>
  );
}

Layout - Summary View

import React from 'react';

import {
  StepperLayout,
  Container,
  Stepper,
  Step,
  Button,
  ButtonGroup,
} from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(0);

  const handleOnNext = () => {
    if (currentStep !== 4) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep === 4) {
      setCurrentStep(0);
    }
  };

  return (
    <>
      <Stepper
        ariaLabel="progress"
        layout={StepperLayout.summaryView}
        currentStep={currentStep}
      >
        <Step label="First Step" secondaryLabel="Description One" />
        <Step label="Second Step" secondaryLabel="Description Two" />
        <Step label="Third Step" secondaryLabel="Description Three" />
        <Step label="Fourth Step" secondaryLabel="Description Four" />
      </Stepper>

      <Container
        style={{
          background: '#F5F5F5',
          borderRadius: '6px',
          margin: '20px 0 0',
          padding: '20px',
        }}
      >
        {currentStep === 0 && <div>Step Content One</div>}
        {currentStep === 1 && <div>Step Content Two</div>}
        {currentStep === 2 && <div>Step Content Three</div>}
        {currentStep === 3 && <div>Step Content Four</div>}
        {currentStep === 4 && <div>Steps Completed</div>}
      </Container>

      <Container style={{ padding: '20px 0' }}>
        <ButtonGroup>
          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
            Previous
          </Button>
          <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
            {currentStep >= 4 ? 'Finish' : 'Next'}
          </Button>
        </ButtonGroup>
      </Container>
    </>
  );
}

Breakpoint Layout

For responsive layouts, the breakpoint prop used along with breakpointLayout hides certain elements of the Stepper at a specified screen width. breakpoint takes a number for the screen width max and breakpointLayout hides either labels or shows just the summary view. By default, step labels will display if no responsive props are used.

Breakpoint - Show Labels

import React from 'react';

import {
  StepperLayout,
  Container,
  Stepper,
  Step,
  Button,
  ButtonGroup,
} from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(0);

  const handleOnNext = () => {
    if (currentStep !== 4) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep === 4) {
      setCurrentStep(0);
    }
  };

  return (
    <>
      <Stepper
        ariaLabel="progress"
        layout={StepperLayout.hideLabels}
        breakpoint={1500}
        breakpointLayout={StepperLayout.showLabels}
        currentStep={currentStep}
      >
        <Step label="First Step" secondaryLabel="Description One" />
        <Step label="Second Step" secondaryLabel="Description Two" />
        <Step label="Third Step" secondaryLabel="Description Three" />
        <Step label="Fourth Step" secondaryLabel="Description Four" />
      </Stepper>

      <Container
        style={{
          background: '#F5F5F5',
          borderRadius: '6px',
          margin: '20px 0 0',
          padding: '20px',
        }}
      >
        {currentStep === 0 && <div>Step Content One</div>}
        {currentStep === 1 && <div>Step Content Two</div>}
        {currentStep === 2 && <div>Step Content Three</div>}
        {currentStep === 3 && <div>Step Content Four</div>}
        {currentStep === 4 && <div>Steps Completed</div>}
      </Container>

      <Container style={{ padding: '20px 0' }}>
        <ButtonGroup>
          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
            Previous
          </Button>
          <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
            {currentStep >= 4 ? 'Finish' : 'Next'}
          </Button>
        </ButtonGroup>
      </Container>
    </>
  );
}

Breakpoint - Hide Labels

import React from 'react';

import {
  StepperLayout,
  Container,
  Stepper,
  Step,
  Button,
  ButtonGroup,
} from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(0);

  const handleOnNext = () => {
    if (currentStep !== 4) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep === 4) {
      setCurrentStep(0);
    }
  };

  return (
    <>
      <Stepper
        ariaLabel="progress"
        breakpoint={1500}
        breakpointLayout={StepperLayout.hideLabels}
        currentStep={currentStep}
      >
        <Step label="First Step" secondaryLabel="Description One" />
        <Step label="Second Step" secondaryLabel="Description Two" />
        <Step label="Third Step" secondaryLabel="Description Three" />
        <Step label="Fourth Step" secondaryLabel="Description Four" />
      </Stepper>

      <Container
        style={{
          background: '#F5F5F5',
          borderRadius: '6px',
          margin: '20px 0 0',
          padding: '20px',
        }}
      >
        {currentStep === 0 && <div>Step Content One</div>}
        {currentStep === 1 && <div>Step Content Two</div>}
        {currentStep === 2 && <div>Step Content Three</div>}
        {currentStep === 3 && <div>Step Content Four</div>}
        {currentStep === 4 && <div>Steps Completed</div>}
      </Container>

      <Container style={{ padding: '20px 0' }}>
        <ButtonGroup>
          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
            Previous
          </Button>
          <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
            {currentStep >= 4 ? 'Finish' : 'Next'}
          </Button>
        </ButtonGroup>
      </Container>
    </>
  );
}

Breakpoint - Summary View

import React from 'react';

import {
  StepperLayout,
  Container,
  Stepper,
  Step,
  Button,
  ButtonGroup,
} from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(0);

  const handleOnNext = () => {
    if (currentStep !== 4) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep === 4) {
      setCurrentStep(0);
    }
  };

  return (
    <>
      <Stepper
        ariaLabel="progress"
        breakpoint={1500}
        breakpointLayout={StepperLayout.summaryView}
        currentStep={currentStep}
      >
        <Step label="First Step" secondaryLabel="Description One" />
        <Step label="Second Step" secondaryLabel="Description Two" />
        <Step label="Third Step" secondaryLabel="Description Three" />
        <Step label="Fourth Step" secondaryLabel="Description Four" />
      </Stepper>

      <Container
        style={{
          background: '#F5F5F5',
          borderRadius: '6px',
          margin: '20px 0 0',
          padding: '20px',
        }}
      >
        {currentStep === 0 && <div>Step Content One</div>}
        {currentStep === 1 && <div>Step Content Two</div>}
        {currentStep === 2 && <div>Step Content Three</div>}
        {currentStep === 3 && <div>Step Content Four</div>}
        {currentStep === 4 && <div>Steps Completed</div>}
      </Container>

      <Container style={{ padding: '20px 0' }}>
        <ButtonGroup>
          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
            Previous
          </Button>
          <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
            {currentStep >= 4 ? 'Finish' : 'Next'}
          </Button>
        </ButtonGroup>
      </Container>
    </>
  );
}

Orientation

The orientation prop allows you to change the orientation of the Stepper. By default, the Stepper is displayed horizontally unless the orientation prop is specified. Vertical Stepper only supports StepperLayout.showLabels and StepperLayout.hideLabels layouts. If StepperLayout.summaryView is used with a vertical Stepper, it will be shown as StepperLayout.hideLabels.

Vertical orientation

import React from 'react';

import {
  Container,
  Stepper,
  StepperOrientation,
  Step,
  Button,
  ButtonGroup,
  Flex,
  FlexBehavior,
  FlexWrap,
  FlexAlignItems,
  FlexJustify,
  FlexDirection,
} from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(0);

  const handleOnNext = () => {
    if (currentStep !== 4) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep === 4) {
      setCurrentStep(0);
    }
  };

  return (
    <Flex
      behavior={FlexBehavior.container}
      wrap={FlexWrap.nowrap}
      style={{ gap: '24px' }}
    >
      <Stepper
        ariaLabel="progress"
        currentStep={currentStep}
        orientation={StepperOrientation.vertical}
      >
        <Step label="First Step" secondaryLabel="Description One" />
        <Step label="Second Step" secondaryLabel="Description Two" />
        <Step label="Third Step" secondaryLabel="Description Three" />
        <Step label="Fourth Step" secondaryLabel="Description Four" />
      </Stepper>

      <Flex
        behavior={FlexBehavior.container}
        alignItems={FlexAlignItems.stretch}
        justify={FlexJustify.spaceBetween}
        direction={FlexDirection.column}
      >
        <Container
          style={{
            background: '#F5F5F5',
            borderRadius: '6px',
            padding: '20px',
            width: '100%',
            flex: 10,
          }}
        >
          {currentStep === 0 && <div>Step Content One</div>}
          {currentStep === 1 && <div>Step Content Two</div>}
          {currentStep === 2 && <div>Step Content Three</div>}
          {currentStep === 3 && <div>Step Content Four</div>}
          {currentStep === 4 && <div>Steps Completed</div>}
        </Container>

        <Flex
          behavior={FlexBehavior.item}
          style={{ paddingTop: '20px', alignSelf: 'flex-end' }}
        >
          <ButtonGroup>
            <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
              Previous
            </Button>
            <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
              {currentStep >= 4 ? 'Finish' : 'Next'}
            </Button>
          </ButtonGroup>
        </Flex>
      </Flex>
    </Flex>
  );
}

Stepper inside a Dropdown

import React from 'react';

import {
  Dropdown,
  DropdownButton,
  DropdownContent,
  Stepper,
  Step,
  StepperOrientation,
} from 'react-magma-dom';

export function Example() {
  return (
    <div style={{ display: 'flex', gap: '1em' }}>
      <Dropdown>
        <DropdownButton>Vertical Stepper</DropdownButton>
        <DropdownContent
          style={{
            maxHeight: 'fit-content',
            padding: '1em',
          }}
        >
          <Stepper
            currentStep={2}
            ariaLabel="progress"
            orientation={StepperOrientation.vertical}
          >
            <Step key={0} label="First Item" secondaryLabel="Description One">
              Item Content One
            </Step>
            <Step key={1} label="Second Item" secondaryLabel="Description Two">
              Item Content Two
            </Step>
            <Step key={2} label="Third Item" secondaryLabel="Description Three">
              Item Content Three
            </Step>
            <Step key={3} label="Fourth Item" secondaryLabel="Description Four">
              Item Content Four
            </Step>
            <Step key={4} label="Fifth Item" secondaryLabel="Description Five">
              Item Content Five
            </Step>
          </Stepper>
        </DropdownContent>
      </Dropdown>
      <Dropdown>
        <DropdownButton>Horizontal Stepper</DropdownButton>
        <DropdownContent
          style={{
            whiteSpace: 'normal',
            maxHeight: 'fit-content',
            padding: '1em',
          }}
        >
          <Stepper currentStep={2} ariaLabel="progress">
            <Step key={0} label="First Item" secondaryLabel="Description One">
              Item Content One
            </Step>
            <Step key={1} label="Second Item" secondaryLabel="Description Two">
              Item Content Two
            </Step>
            <Step key={2} label="Third Item" secondaryLabel="Description Three">
              Item Content Three
            </Step>
            <Step key={3} label="Fourth Item" secondaryLabel="Description Four">
              Item Content Four
            </Step>
            <Step key={4} label="Fifth Item" secondaryLabel="Description Five">
              Item Content Five
            </Step>
          </Stepper>
        </DropdownContent>
      </Dropdown>
    </div>
  );
}

Breakpoint Orientation

For responsive layouts, the breakpoint prop can be used in combination with the breakpointOrientation prop to change the Stepper’s orientation based on screen width. The breakpoint prop sets a maximum screen width, and breakpointOrientation defines the desired orientation (horizontal or vertical) when the screen width is below the specified breakpoint. By default, the Stepper is displayed horizontally if no responsive props are used. It is recommended to use breakpointOrientation with ResponsiveStepperContainer for optimal behavior.

import React from 'react';

import {
  Container,
  StepperLayout,
  StepperOrientation,
  Step,
  Button,
  ButtonGroup,
  Flex,
  FlexBehavior,
  ResponsiveStepperContainer,
} from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(0);

  const handleOnNext = () => {
    if (currentStep !== 4) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep === 4) {
      setCurrentStep(0);
    }
  };

  return (
    <ResponsiveStepperContainer
      currentStep={currentStep}
      breakpoint={1200}
      breakpointOrientation={StepperOrientation.vertical}
      breakpointLayout={StepperLayout.hideLabels}
      ariaLabel="progress"
      steps={[
        <Step key={0} label="First Item" secondaryLabel="Description One">
          Item Content One
        </Step>,
        <Step key={1} label="Second Item" secondaryLabel="Description Two">
          Item Content Two
        </Step>,
        <Step key={2} label="Third Item" secondaryLabel="Description Three">
          Item Content Three
        </Step>,
        <Step key={3} label="Fourth Item" secondaryLabel="Description Four">
          Item Content Four
        </Step>,
      ]}
    >
      <Container
        style={{
          background: '#F5F5F5',
          borderRadius: '6px',
          padding: '20px',
          width: '100%',
          flex: 10,
        }}
      >
        {currentStep === 0 && <div>Step Content One</div>}
        {currentStep === 1 && <div>Step Content Two</div>}
        {currentStep === 2 && <div>Step Content Three</div>}
        {currentStep === 3 && <div>Step Content Four</div>}
        {currentStep === 4 && <div>Steps Completed</div>}
      </Container>

      <Flex
        behavior={FlexBehavior.item}
        style={{ padding: '20px 0', alignSelf: 'flex-end' }}
      >
        <ButtonGroup>
          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
            Previous
          </Button>
          <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
            {currentStep >= 4 ? 'Finish' : 'Next'}
          </Button>
        </ButtonGroup>
      </Flex>
    </ResponsiveStepperContainer>
  );
}

Error State

When a Step is in the error state, use hasError on the Step to change the styling.

import React from 'react';

import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom';

export function Example() {
  return (
    <>
      <Stepper ariaLabel="progress" currentStep={2}>
        <Step label="First Step" secondaryLabel="Description One" />
        <Step label="Second Step" secondaryLabel="Description Two" />
        <Step label="Third Step" hasError secondaryLabel="Description Three" />
        <Step label="Fourth Step" secondaryLabel="Description Four" />
      </Stepper>

      <Container
        style={{
          background: '#F5F5F5',
          borderRadius: '6px',
          margin: '20px 0 0',
          padding: '20px',
        }}
      >
        <div>Step Content Three</div>{' '}
      </Container>

      <Container style={{ padding: '20px 0' }}>
        <ButtonGroup>
          <Button disabled>Previous</Button>
          <Button disabled>Next</Button>
        </ButtonGroup>
      </Container>
    </>
  );
}

Inverse

import React from 'react';

import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom';

export function Example() {
  const [currentStep, setCurrentStep] = React.useState(0);

  const handleOnNext = () => {
    if (currentStep !== 4) {
      setCurrentStep(currentStep + 1);
    }
  };
  const handleOnPrevious = () => {
    if (currentStep !== 0) {
      setCurrentStep(currentStep - 1);
    }
  };
  const handleFinish = () => {
    if (currentStep === 4) {
      setCurrentStep(0);
    }
  };

  return (
    <Container isInverse style={{ padding: '20px' }}>
      <Stepper ariaLabel="progress" currentStep={currentStep} isInverse>
        <Step label="First Step" secondaryLabel="Description One" />
        <Step label="Second Step" secondaryLabel="Description Two" />
        <Step label="Third Step" secondaryLabel="Description Three" />
        <Step label="Fourth Step" secondaryLabel="Description Four" />
      </Stepper>

      <Container
        style={{
          background: '#1A1E51',
          borderRadius: '6px',
          margin: '20px 0 0',
          padding: '20px',
        }}
      >
        {currentStep === 0 && <div>Step Content One</div>}
        {currentStep === 1 && <div>Step Content Two</div>}
        {currentStep === 2 && <div>Step Content Three</div>}
        {currentStep === 3 && <div>Step Content Four</div>}
        {currentStep === 4 && <div>Steps Completed</div>}
      </Container>

      <Container style={{ padding: '20px 0' }}>
        <ButtonGroup>
          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
            Previous
          </Button>
          <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
            {currentStep >= 4 ? 'Finish' : 'Next'}
          </Button>
        </ButtonGroup>
      </Container>
    </Container>
  );
}

Step Props

Any other props supplied will be provided to the wrapping div element.

hasError

Description

Error state for each step.

Type

boolean

Default

false

label

Description

Label beneath each step.

Type

string

Default

secondaryLabel

Description

Sub label beneath each step.

Type

string

Default

Stepper Props

Any other props supplied will be provided to the wrapping div element.

ariaLabel

Required

Description

Customizable aria-label for accessibility.

Type

string

Default

breakpoint

Description

Custom number for responsive styling, uses a minimum 'breakpoint' width from the set number.

Type

number

Default

breakpointLayout

Description

Changes the Stepper view for responsive layouts, needs a minimum 'breakpoint' number.

Type

enum, one of:
StepperLayout.hideLabels
StepperLayout.showLabels
StepperLayout.summaryView

Default

breakpointOrientation

Description

Changes the Stepper orientation for responsive layouts, needs a minimum 'breakpoint' number.

Type

enum, one of:
StepperOrientation.horizontal
StepperOrientation.vertical

Default

completionLabel

Description

Sets a custom label for the completed Step.

Type

string

Default

All steps completed

currentStep

Required

Description

Current step value.

Type

number

Default

isInverse

Description

Inverse styling.

Type

boolean

Default

false

layout

Description

Sets the Stepper view

Type

enum, one of:
StepperLayout.hideLabels
StepperLayout.showLabels
StepperLayout.summaryView

Default

StepperLayout.showLabels

orientation

Description

Determines if the stepper is displayed vertically or horizontally

Type

enum, one of:
StepperOrientation.horizontal
StepperOrientation.vertical

Default

StepperOrientation.horizontal

stepLabel

Description

Sets a custom label for the Step count # of #.

Type

string

Default

Step

ResponsiveStepperContainer Props

Any other props supplied will be provided to the wrapping Stepper element.

children

Description

The content of the component

Type

React.ReactNode

Default

currentStep

Required

Description

Current step value.

Type

number

Default

steps

Required

Description

Steps of the Stepper.

Type

React.ReactNode[]

Default

On this page

Design

Components

Patterns

Data Visualization

Stepper

Basic Usage

Step label

Completion Label

Aria Label

Layout

Layout - Hide Labels

Layout - Show Labels

Layout - Summary View

Breakpoint Layout

Breakpoint - Show Labels

Breakpoint - Hide Labels

Breakpoint - Summary View

Orientation

Vertical orientation

Stepper inside a Dropdown

Breakpoint Orientation

Error State

Inverse

Step Props

Stepper Props

ResponsiveStepperContainer Props