# Stepper

The Stepper is a navigation component that guides users through a multi-step process in a structured and sequential manner. It is commonly used in forms, onboarding flows, and checkout processes, providing clear progress indicators and step-by-step guidance to enhance the user experience.

<figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FfovBrNh1xB0qDWw9w35l%2Fimage.png?alt=media&#x26;token=5101f3d1-b55b-4a96-b62f-b7f0910a30b0" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Component React" %}

```
// Sample code

<Stepper
  activeSteps=""
  currentStep={1}
  customSteps={{}}
  direction="horizontal"
  onChange={()=>{}}
  onStepClick={()=>{}}
  populators={{
    name: 'stepper'
  }}
  props={{
    labelStyles: {}
  }}
  style={{}}
  totalSteps={5}
/>
```

{% endtab %}

{% tab title="Component Flutter" %}

```
// Sample code

DigitStepper(
          activeIndex: 1,
          stepperList:  [
            StepperData(
              title: 'vendor details',
              onStepTap: (){},
            ),
            const StepperData(
              title: 'contact details',
            ),
            const StepperData(
              title: 'service details',
            ),
            const StepperData(
              title: 'worker details',
            ),
            const StepperData(
              title: 'Summary',
            ),

          ],
          stepperDirection: Axis.horizontal,
          inverted: true,
        ),
```

{% endtab %}

{% tab title="Component Design" %}

{% endtab %}
{% endtabs %}

## Anatomy

***

<figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FhuvtFMUrIm0SYJjQ3NoX%2Fimage.png?alt=media&#x26;token=3e44950c-33d1-4c9b-88d9-f7084a1627c4" alt=""><figcaption></figcaption></figure>

## Variants

***

<table data-header-hidden><thead><tr><th width="321"></th><th></th></tr></thead><tbody><tr><td><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F7WdQuPBkb5zow6VsyCsR%2Fimage.png?alt=media&#x26;token=2306f09b-1ed9-429a-9e84-71f50629296a" alt=""></td><td><p><strong>Horizontal Stepper</strong></p><p>Displays steps in a single row, guiding users through a linear process from left to right. Ideal for checkouts, onboarding, and multi-step forms with clear progress indicators.</p></td></tr><tr><td><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FuLu7mPWInsqNmGu1YXvV%2Fimage.png?alt=media&#x26;token=ab7a9205-2167-49fd-9619-b3a663b24582" alt=""></td><td><strong>Vertical Stepper</strong><br>The Vertical Stepper displays steps in a column, ideal for mobile screens or detailed content. It improves readability and offers clear top-to-bottom navigation, making it great for forms or lengthy descriptions.</td></tr></tbody></table>

## Properties

<table data-header-hidden data-full-width="false"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Divider</strong><br>Determines whether a visual separator (divider) is displayed between steps. Helps in distinguishing each step clearly.<br></td><td><div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FUhafLJ5B4Akk4T03U8QB%2Fimage.png?alt=media&#x26;token=0ffd7dc9-4f1e-4c2d-9dcf-50bca2232a10" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Number of Steps</strong><br>Defines the total steps in the stepper. Helps in setting the length of the process.</td><td><div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FmSD12kDOu1EINGU6lWTM%2Fimage.png?alt=media&#x26;token=ff977826-d7ff-4710-acfd-d3ebe1d03f0e" alt=""><figcaption></figcaption></figure></div></td></tr></tbody></table>

## Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

{% tabs %}
{% tab title="React" %}

<table><thead><tr><th width="257">Property</th><th>Value</th><th>Default</th></tr></thead><tbody><tr><td>currentStep</td><td>text</td><td>-</td></tr><tr><td>onStepClick</td><td>text</td><td>no</td></tr><tr><td>totalSteps</td><td>yes/no</td><td>no</td></tr><tr><td>customSteps</td><td>yes/no</td><td>-</td></tr><tr><td>direction</td><td>number</td><td>-</td></tr><tr><td>style</td><td>yes/no</td><td>-</td></tr><tr><td>className</td><td>yes/no</td><td>no</td></tr><tr><td>activeSteps</td><td>yes/no</td><td>no</td></tr><tr><td>hideDivider</td><td>yes/no</td><td>no</td></tr><tr><td>props</td><td>number</td><td>no</td></tr></tbody></table>
{% endtab %}

{% tab title="Flutter" %}

<table><thead><tr><th>Property</th><th width="209">Value</th><th>Default</th></tr></thead><tbody><tr><td>stepperList</td><td>List&#x3C;StepperData></td><td>required</td></tr><tr><td>activeIndex</td><td>int</td><td>-</td></tr><tr><td>stepperDirection</td><td>Axis</td><td>Axis.horizontal</td></tr><tr><td>inverted</td><td>bool</td><td>false</td></tr><tr><td>currentProgressedIndex</td><td>int</td><td>-</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

## Interaction State

***

<table data-header-hidden data-full-width="false"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Active State</strong><br>The current step is visually highlighted to indicate progress.<br></td><td><div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FKCovVvoevmsWYkvIileC%2Fimage.png?alt=media&#x26;token=2923e3d5-c51d-4921-b9e5-c0e878cc25bb" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Completed State</strong><br>Steps that users have finished are marked as completed, often with a checkmark or different styling.</td><td><div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FJ8Qc6yaf8kL3dkJb40Y4%2Fimage.png?alt=media&#x26;token=d0f71ed4-6526-4376-9dab-c71acc5179d4" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Hover State</strong><br>On hover, inactive steps highlight to indicate they are clickable and part of the navigation flow.</td><td><div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FABMHMGydVr9XbZXxU2xh%2Fimage.png?alt=media&#x26;token=6387fc74-d040-4be8-9283-95ad8dc86f05" alt=""><figcaption></figcaption></figure></div></td></tr></tbody></table>

## Behaviours

|                                                                                                                                                                                                                                                                                            |                                                                                                                                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FWUGjqV2zTckqdhUZdoNi%2Fimage.png?alt=media&#x26;token=eef5f50e-752f-4b4e-9670-91736ba2863d" alt=""><figcaption></figcaption></figure></div> | <p><strong>Horizontal Scrolling</strong></p><p>When using a horizontal stepper in a narrow container, steps can scroll sideways to accommodate all steps within view.</p>                                                                                 |
| <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FNFd9BkO6Co0olRgISkJJ%2Fimage.png?alt=media&#x26;token=75f3b92a-c334-42b5-bb47-717a11452557" alt=""><figcaption></figcaption></figure></div> | <p><strong>Vertical Scrolling</strong></p><p>In vertical layouts with limited height, steps scroll vertically to ensure users can access each step sequentially without content being cut off.</p>                                                        |
| <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FP8a7OPf09D08yv7KElbr%2Fimage.png?alt=media&#x26;token=4c6b1b43-0589-45eb-8a65-9aa7dd4cb64c" alt=""><figcaption></figcaption></figure></div> | <p><strong>Label Overflow</strong></p><p>If step labels exceed the available space, they are truncated with ellipsis (...) or wrapped to the next line based on layout and design requirements. Tooltips can be used to show the full label on hover.</p> |
| <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FIH4BUVkRegojC3Eg6Z2C%2Fimage.png?alt=media&#x26;token=381cbee9-ef4b-455a-9b63-55c3ed4be3ff" alt=""><figcaption></figcaption></figure></div> | <p><strong>Flexible Dimensions</strong></p><p>Steppers adapt to custom width and height defined by their parent containers using flex layouts. They maintain usability and alignment across different screen sizes and orientations.</p>                  |

***

## Usage Guide

***

| <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FvAGsozpT356D7o9aI0zd%2Fimage.png?alt=media&#x26;token=77b7d11f-c2f4-4d88-ad3e-5d2285bedc06" alt=""><figcaption></figcaption></figure></div> | <p><strong>Use for a process that involves multiple steps</strong></p><p>Use a stepper only when a process involves multiple steps, ensuring clear progression and user guidance.</p> |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FL4jnDrvSXx2UUcsbgs52%2Fimage.png?alt=media&#x26;token=93228e8e-a2f9-487a-90ae-8911e8c07c30" alt=""><figcaption></figcaption></figure></div> | <p><strong>Avoid using it for just one or two steps</strong></p><p>Avoid using a stepper for processes with just one or two steps, as it adds unnecessary complexity.</p>             |

## Changelog

***

| Date         | Number  | Notes                                                                                           |
| ------------ | ------- | ----------------------------------------------------------------------------------------------- |
| Dec 15, 2024 | v-0.0.2 | <p>This component is added to the website.<br>This component is now individually versioned.</p> |

## Design Checklist

***

<table data-header-hidden><thead><tr><th width="129" data-type="checkbox"></th><th></th></tr></thead><tbody><tr><td>true</td><td><strong>All interactive states</strong> - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).</td></tr><tr><td>true</td><td><strong>Accessible use of colours</strong> - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)</td></tr><tr><td>true</td><td><strong>Accessible contrast for text</strong> - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).</td></tr><tr><td>true</td><td><strong>Accessible contrast for UI components</strong> - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).</td></tr><tr><td>true</td><td><strong>Keyboard interactions</strong> - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).</td></tr><tr><td>false</td><td><strong>Screen reader accessible</strong> - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.</td></tr><tr><td>true</td><td><strong>Responsive for all breakpoints</strong> - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop</td></tr><tr><td>true</td><td><strong>Usage guidelines</strong> - Includes a list of dos and don'ts that highlight best practices and common mistakes.</td></tr><tr><td>false</td><td><strong>Content guidelines</strong> - Content standards and usage guidelines for writing and formatting in-product content for the component.</td></tr><tr><td>true</td><td><strong>Defined variants and properties</strong> - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)</td></tr><tr><td>true</td><td><strong>Defined behaviours</strong> - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.</td></tr><tr><td>true</td><td><strong>Design Kit</strong> - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.</td></tr></tbody></table>