chakra-ui-steps

Steps component designed to work seamlessly with Chakra UI


Keywords
steps, stepper, chakra, navigation, multi, chakra-ui, react, reactjs
License
MIT
Install
npm install chakra-ui-steps@2.1.0

Documentation

chakra-ui-steps

Steps component designed to work seamlessly with Chakra UI. An interactive demo along with code examples can be viewed here.

MIT License npm - chakra-ui-steps bundle size - chakra-ui-steps bundle size - chakra-ui-steps Total Downloads - chakra-ui-steps

screenshot

Features

  • Multiple orientations
  • Easily render step content
  • Custom icons
  • Size variants

Installation

Yarn:

yarn add chakra-ui-steps

NPM:

npm i chakra-ui-steps

Usage

NOTE: This v1.4.0 of this component requires @chakra-ui/react >= v1.6.7 to work correctly. You can follow the installation instructions here. If you aren't able to update your chakra version you can still use v1.3.0

In order to get started you will need to extend the default Chakra theme with the provided StepsStyleConfig object, like so:

import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { StepsStyleConfig as Steps } from 'chakra-ui-steps';

const theme = extendTheme({
  components: {
    Steps,
  },
});

export const App = () => {
  return (
    <ChakraProvider theme={theme}>
      <YourApp />
    </ChakraProvider>
  );
};

Once that's done you should be good to go!

Basic Example

import { Step, Steps, useSteps } from 'chakra-ui-steps';

const content = (
  <Flex py={4}>
    <LoremIpsum p={1} />
  </Flex>
);

const steps = [
  { label: 'Step 1', content },
  { label: 'Step 2', content },
  { label: 'Step 3', content },
];

export const StepsExample = () => {
  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({
    initialStep: 0,
  });

  return (
    <Flex flexDir="column" width="100%">
      <Steps activeStep={activeStep}>
        {steps.map(({ label, content }) => (
          <Step label={label} key={label}>
            {content}
          </Step>
        ))}
      </Steps>
      {activeStep === steps.length ? (
        <Flex p={4}>
          <Button mx="auto" size="sm" onClick={reset}>
            Reset
          </Button>
        </Flex>
      ) : (
        <Flex width="100%" justify="flex-end">
          <Button
            isDisabled={activeStep === 0}
            mr={4}
            onClick={prevStep}
            size="sm"
            variant="ghost"
          >
            Prev
          </Button>
          <Button size="sm" onClick={nextStep}>
            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
          </Button>
        </Flex>
      )}
    </Flex>
  );
};

Custom Styles

If you would like to customize the appearance of the Steps component you can do so using the multi part component styling approach as described here. The parts available for styling are:

connector;
description;
icon;
iconLabel;
label;
labelContainer;
step;
stepContainer;
stepIconContainer;
steps;

The default styles for each part can be found here. Below is an example of how you might change the stroke width of the icons:

import { StepsStyleConfig } from 'chakra-ui-steps';

const CustomSteps = {
  ...StepsStyleConfig,
  baseStyle: (props) => {
    return {
      ...StepsStyleConfig.baseStyle(props),
      icon: {
        ...StepsStyleConfig.baseStyle(props).icon,
        // your custom styles here
        strokeWidth: '1px',
      },
    };
  },
};

const theme = extendTheme({
  components: {
    Steps: CustomSteps,
  },
});

Props

Note: Both the Step and Steps component extend the Chakra UI Box component so they accept all the default styling props.

Steps

Prop Type Required Description Default
activeStep number yes Currently active step 0
colorScheme string no Sets the color accent of the Steps component show green
orientation string no Sets the orientation of the Steps component horizontal
responsive boolean no Sets whether the component auto switches to vertical orientation on mobile true
checkIcon React.ComponentType no Allows you to provide a custom check icon undefined
onClickStep () => void no If defined, allows you to click on the step icons undefined
labelOrientation string no Switch between horizontal and vertical label orientation undefined
state 'loading' | 'error' no Let's you set the state to error or loading undefined

Step

Prop Type Required Description Default
label string no Sets the title of the step ''
description string no Provides extra info about the step ''
icon React.ComponentType no Custom icon to overwrite the default numerical indicator of the step undefined
isCompletedStep boolean no Individually control each step state, defaults to active step undefined
isKeepError boolean no Individually control if each step should keep showing the error state undefined
checkIcon React.ComponentType no Allows you to provide a custom check icon that will override the one provided to Steps undefined
state 'loading' | 'error' no Let's you set the state in a specific Step, if defined it will override the one provided to Steps undefined