---
description: How to add and style 'Steps'.
---

# Steps

## What Are Steps? <a href="#what-is-a-divider" id="what-is-a-divider"></a>

Steps can be used to visually represent a sequence of steps or stages in a process. They are commonly used in multi-step forms, onboarding processes, progress trackers, and any scenario where you want to guide the user through a series of tasks or stages.

{% hint style="success" %}
**Location in the Parts Library:** Base Parts > Navigation > Steps
{% endhint %}

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FLmIA6e6s2qX0BbvZ5C46%2FSteps.gif?alt=media&#x26;token=44dc8084-066d-480d-b1ae-926377c1076a" alt=""><figcaption><p>Example Steps</p></figcaption></figure>

## Why Are Steps Useful?

Steps provide:

* Sequential representation by illustrating the progression through a process, making it clear which step the user is on and how many steps remain.
* User guidance by breaking down complex processes into smaller, manageable steps, they guide users effectively, reducing cognitive load and potential confusion.
* Progress indication by providing a visual indication of progress, helping users to understand their current position in the process, and encouraging them to complete it.

The Steps part (parent) houses several Step parts. Each step parts represents a step or stage in the process.&#x20;

## Editing and Formatting Steps

Like many other parts, [borders](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/borders), [shadow](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/shadow), [opacity](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/opacity), [rounding](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/rounding), and [spacing](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/spacing) can be applied using the property editor on the right, once the steps part has been selected.

### **Changing the Colors of Step Parts** <a href="#changing-the-colors-of-radio-buttons" id="changing-the-colors-of-radio-buttons"></a>

Steps have more [color](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/colors-and-themes) properties than most other parts. The background and foreground colors can be set.

You can also change the colors of Steps in an active state, when focused, and on hover. These are done the same way for foreground and background color.

To change the color when the Step is being hovered, select the Step and open the 'Colors on Hover' editor on the right. Now you can set your preferred background and foreground color combination to signify that the Step is being hovered.

The 'Color on Focus' editor on the right refers to the color of the Step after it has been clicked, or if the user tabs to the Step.

The 'Color on Active' editor on the right refers to the color of the Step when it is active.

The background colors of Steps can be a [color gradient](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/color-gradients).

### **Changing the Orientation of Steps Parts** <a href="#changing-the-colors-of-radio-buttons" id="changing-the-colors-of-radio-buttons"></a>

Steps can be horizontal or vertical, and the orientation can be adjusted according to device size.

To change the orientation, select the Steps Part. This will activate the property editing panel on the right. Then go to 'Orientation'.

Here is an example:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F9e4Qg57csSDGThzQ6Mzu%2FStepsOrientation.gif?alt=media&#x26;token=e2bd9c02-5d40-4950-9c84-5441d0e9a534" alt=""><figcaption><p>Changing the Orientation of Steps Parts</p></figcaption></figure>



More information on Steps is coming soon.



## Related Information

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:orange;">Customizing and formatting</mark></td><td></td><td></td><td><a href="../../customising-and-formatting">customising-and-formatting</a></td></tr></tbody></table>
