Chakra-UI

I♥️Components

Stepper

|

Chakra Docs

|

⦾ The Chakra UI Stepper component is designed to provide users with a clear visual representation of their progression through a multi-step process. Often seen in scenarios such as form filling, onboarding flows, or any other multi-phase operation, a well-designed stepper can greatly enhance user experience. It is a comprehensive solution that encapsulates best practices for step-based user interfaces, while also offering great flexibility and customization for diverse use cases.

The Stepper component is a versatile tool that allows developers to create a highly customizable step-based interface. It provides a variety of subcomponents that can be tailored to suit different use cases. use-cases.

The many parts of the Stepper component are as follows:

  • Step: This is the main component for an individual step. It holds the components that make up the content of the step.
  • StepDescription: This component is used to provide a brief description of the particular step.
  • StepIcon: This component is used to display an icon for the step. It's commonly used to indicate the completion of a step.
  • StepIndicator: This component wraps around the step's status elements, such as the StepIcon and StepNumber.
  • StepNumber: This component is used to display the numeric value of the step.
  • StepSeparator: This component is used to visually separate individual steps.
  • StepStatus: This component is used to switch between different step states, like complete, incomplete, and active. It usually wraps around the StepIcon or StepNumber component.
  • StepTitle: This component is used to display the title of a particular step.
  • Stepper: This is the parent component that holds and manages all the Step components. It keeps track of the current active step and can control the orientation and size of the stepper.

These components can be imported as follows:

Examples

Using the Stepper Component

⦾ Chakra UI provides a useSteps hook to help manage the state of the stepper and the active step index. Below is a practical example that displays a horizontal step indicator, with each step representing a different stage of a form completion process.

In the following example, the steps array holds the different steps for our stepper. For each step, we provide a title and description, which are displayed in the StepTitle and StepDescription components respectively.

We use the useSteps hook to manage the active step, with the index starting at 1. The Stepper component takes the activeStep as a prop to know which step to highlight. Inside the StepIndicator, we use the StepStatus component to render different content based on whether the step is complete, incomplete, or active.

First

Welcome

2

Second

Overview

3

Third

Sign up

Code

Modifying the Stepper Orientation

⦾ The Stepper component is highly customizable and allows changes in its orientation, size, color scheme, and step indicator's content.

By default, the stepper component is displayed horizontally. However, you can change its orientation to vertical by passing the orientation prop as 'vertical'. You can also set the height and the gap between steps. The following stepper is almost identical to the first, only this time it is displayed vertically.

First

Welcome

2

Second

Overview

3

Third

Sign up

Code

Adjusting the size

⦾ If you need to modify the size of the step indicator, provide the size prop to the Stepper component. This can be set to 'sm', 'md', or 'lg' as per your requirements.

First

Welcome

2

Second

Overview

3

Third

Sign up

Code

Color Variation

⦾ The stepper component's colorScheme is set to blue by default. If you wish to alter this, you can use the colorScheme prop within the Stepper component, setting it to any available one. The following has colorScheme set to pink.

First

Welcome

2

Second

Overview

3

Third

Sign up

Code

Adjusting Content

⦾ In certain scenarios, you may desire to display unique icons or elements inside the StepIndicator component. To accomplish this, you can use the StepStatus component, which allows for the display of custom React elements, depending on the status of the step.
👍

First

Welcome

➡️

Second

Overview

❓

Third

Sign up

Code

Setting Active Step

⦾ Here's an example where we have a stepper with three steps. We're using useSteps to manage the active step and then using the setActiveStep function to change the active step when a step is clicked. In this example, the 'Second' step will be the active step when the component is first rendered because we're setting the initial index to 1 (arrays in JavaScript are zero-indexed). The active step will change to whatever step is clicked by the user.

First

Welcome

2

Second

Overview

3

Third

Sign up

Code

Progress Bar

⦾ If you wish to include a progress bar, the StepSeparator component can be swapped out for a custom progress indicator. For instance, the Progress component can provide a more personalized experience.

Below is an example where a Progress component is added. The progress is updated based on the active step, which is managed by useSteps. Note that the progress bar is absolutely positioned within the Box that wraps the Stepper, so it will display underneath the step indicators.

In this example, the 'Second' step will be the active step when the component is first rendered because we're setting the initial index to 1. The progress bar will represent the progress through the steps as the user interacts with the stepper.

Code

Step Summary

⦾ When the step labels are hidden, you can opt to display a summary of the current step below the step group. This practice is particularly useful for smaller screens or responsive mobile views, as it provides users with a clear understanding of the current step's label.

In this interactive example, you'll notice the step summary displayed beneath the step group, making it easier to identify the current step even when the labels are not directly visible.

First: Welcome

Code

Did you know?

Creative Idea No. 1

Animating Step Transitions: To enhance the user experience further, consider adding animations during step transitions. This can be done using a third-party library like react-transition-group.

Step 1

Step 2

Step 3

Code

Creative Idea No. 2

Interactive Step Indicator: In this use-case, each step indicator not only shows the step status, but also provides more information about the step through a tooltip on hover. This can enhance the user experience by providing context-sensitive help or additional details.

Step 1

Size

Step 2

Toppings

Step 3

Buy

Code

Creative Idea No. 3

Dynamic Steps: Sometimes, we don't know the exact number of steps at the beginning. In such cases, we can dynamically generate steps.

Step 1

Choose Size

Step 2

Choose Toppings

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.