Steps

Step indicators are used to show users their current position within a sequence of steps.

Overview

Usage

When to use this component?

Step indicators are used in multi-step processes to guide users through each stage, making them ideal for forms, checkout processes, and workflows. They visually represent progress, helping users understand which steps are completed, which are current, and which are remaining.

How it works

A step indicator component typically shows a series of steps represented by numbers, icons, or labels. The current step is highlighted, while completed and upcoming steps have distinct visual markers. The component can be configured to display steps horizontally or vertically, and may include optional text labels to provide additional context for each step.

Code

Vanilla Js

// Horizontal Stepper

<dda-horizontal-stepper
    steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."}]'
    current_step="1"
    custom_class=''
    mode='light'
></dda-horizontal-stepper>
        
  // Vertical stepper
  
  <dda-vertical-stepper
    steps='[{"icon":"sentiment_satisfied","title":"Step 1","subtitle":"Subtitle 1","description":"Description 1"},{"icon":"sentiment_satisfied","title":"Step 2","subtitle":"Subtitle 2","description":"Description 2"},{"icon":"sentiment_satisfied","title":"Step 3","subtitle":"Subtitle 3","description":"Description 3"}]'
    current_step="1"
    custom_class='""'
    mode='"light"'
></dda-vertical-stepper>
  
  

React

// Horizontal Stepper

      <DdaHorizontalStepper
            steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."}]'
            current_step="1"
            custom_class='""'
            mode='"light"'
        ></DdaHorizontalStepper>
        
  // Vertical stepper
  
     <DdaVerticalStepper
            steps='[{"icon":"sentiment_satisfied","title":"Step 1","subtitle":"Subtitle 1","description":"Description 1"},{"icon":"sentiment_satisfied","title":"Step 2","subtitle":"Subtitle 2","description":"Description 2"},{"icon":"sentiment_satisfied","title":"Step 3","subtitle":"Subtitle 3","description":"Description 3"}]'
            current_step="1"
            custom_class='""'
            mode='"light"'
        ></DdaVerticalStepper>

Vue

// Horizontal Stepper

       <DdaHorizontalStepper
            steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."}]'
            current_step="1"
            custom_class='""'
            mode='"light"'
        ></DdaHorizontalStepper>
        
  // Vertical stepper
  
        <DdaVerticalStepper
            steps='[{"icon":"sentiment_satisfied","title":"Step 1","subtitle":"Subtitle 1","description":"Description 1"},{"icon":"sentiment_satisfied","title":"Step 2","subtitle":"Subtitle 2","description":"Description 2"},{"icon":"sentiment_satisfied","title":"Step 3","subtitle":"Subtitle 3","description":"Description 3"}]'
            current_step="1"
            custom_class='""'
            mode='"light"'
        ></DdaVerticalStepper>

Angular

// Horizontal Stepper

 <dda-horizontal-stepper
    steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."}]'
    current_step="1"
    custom_class='""'
    mode='"light"'
></dda-horizontal-stepper>
        
  // Vertical stepper
  
  <dda-vertical-stepper
    steps='[{"icon":"sentiment_satisfied","title":"Step 1","subtitle":"Subtitle 1","description":"Description 1"},{"icon":"sentiment_satisfied","title":"Step 2","subtitle":"Subtitle 2","description":"Description 2"},{"icon":"sentiment_satisfied","title":"Step 3","subtitle":"Subtitle 3","description":"Description 3"}]'
    current_step="1"
    custom_class='""'
    mode='"light"'
></dda-vertical-stepper>

Properties

Properties

Property	Description	Type
type	Defines the style of the tab. It can either be text (just the text of the tab) or text-icon (a combination of text and an icon next to the text). Defaults to 'text'.	string
hover_style	Specifies the hover style for the tabs. Options include different background or border styles that change when a tab is hovered over. Defaults to 'dda-tab-default'.	'dda-tab-default' | 'dda-tab-filed' | 'dda-tab-underline' | 'dda-tab-underline-filled'
border_bottom	Determines whether a border is shown at the bottom of the tab. Defaults to false, meaning no border is added.	boolean
custom_class	Allows the user to apply custom CSS classes to the tabs container for additional styling. Defaults to an empty string (no custom class).	string
component_mode	Optionally defines a mode for the component ('light' or 'dark'), which could be used for conditional styling or behavior. Defaults to 'light'.	string
button_id	An optional ID that can be applied to the button elements of the tabs. Useful for targeting the tabs with specific JavaScript or CSS.	string
aria_label	Defines an accessible label for the tab buttons, improving accessibility by describing the purpose of the buttons for screen readers.	string

Anatomy

Anatomy Options

Complete: Indicates a completed step in the process, typically shown with a checkmark or a specific color to signify completion.

Current: Highlights the step currently in progress or being viewed, providing a visual indication of the active step.

Dashed Lines: Connects steps to indicate progression. Dashed styling suggests steps that are yet to be completed.

Default: Represents steps that are pending, often displayed with a neutral or inactive style to indicate future actions.

Dos and Don'ts

Dos	Don'ts
Use step indicators to guide users through multi-step processes.	Don't use step indicators for single-step processes.
Label each step clearly to indicate its purpose.	Avoid using ambiguous or unclear labels for steps.
Ensure step indicators are large enough to be easily noticeable.	Don't make step indicators too small or difficult to see.
Provide visual feedback to indicate the current, completed, and upcoming steps.	Don't leave users guessing which step they are on.
Use consistent styling and spacing across all step indicators in the application.	Don't use inconsistent styles that may confuse users.
Update the step indicator in real-time as the user progresses through the steps.	Don't use step indicators if you cannot provide real-time updates.