# Timeline
## Overview
## Usage
### When to use this component?
Timeline components are essential in multi-step processes where clear navigation and progress visualization are crucial. They are ideal for guiding users through forms, checkout processes, and complex workflows, providing a visual representation of which steps have been completed, which are active, and which are yet to be done.
### How it works
A timeline component typically displays a sequence of steps, each represented by numbers, icons, or labels. The current step is distinctly highlighted, while completed steps and upcoming steps have different visual markers to clearly delineate progress. Timelines can be oriented either horizontally or vertically and may include additional text labels to offer more context for each step, ensuring users always know their location and what's required next in the process.
### Code
{% tabs %}
{% tab title="Vanilla Js" %}
<dda-horizontal-stepper
steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry."}]'
current_step="1"
custom_class=''
mode='light'
></dda-horizontal-stepper>
{% endtab %}
{% tab title="React" %}
```jsx
```
{% endtab %}
{% tab title="Vue" %}
```jsx
```
{% endtab %}
{% tab title="Angular" %}
```jsx
```
{% endtab %}
{% endtabs %}
### 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'` |
| `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_ids` | Specifies an array of button IDs used to identify and manage tab buttons. Useful for targeting specific buttons in scripting or accessibility features. | `string` |
| `button_values` | To define the value of tab item | `string` |
| `aria_label` | Defines an accessible label for the tab buttons, improving accessibility by describing the purpose of the buttons for screen readers. | `string` |
| `tab_texts` | Defines an array of text labels for each tab. These labels are displayed on the tab buttons and help users navigate between different content sections. | `string` |
| `tab_type` | Defines tab layout style (e.g., `"dda-horizontal-tab"`, `"dda-vertical-tab"`). | `string` |
| `button_name` | Specifies the name attribute for the button element | `string` |
| `ontabclick` | javascript function | `function` |
## Anatomy
### Anatomy Options
**Status Icon**: A visual indicator showing the current state of the step (e.g., checkmark for completed, number for pending).
**Status Text**: Displays the progress state such as "Completed", "Active", or "Pending".
**Step Title**: The main heading that defines the purpose or name of the step.
**Step Description**: Should be corrected to "Step Title"—the descriptive title for each step in the flow.
**Step Description**: A supporting text that offers more context or instructions for the step.
**Completed Line**: A solid line connecting completed steps, indicating progress.
**Dashed Line**: A dotted connector line used for upcoming or incomplete steps.
***
## Dos and Don'ts
| Dos | Don'ts |
| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| Clearly label each step to ensure users understand what each part of the process entails. | Use ambiguous or unclear labels that might confuse users about what is expected of them. |
| Highlight the current step distinctly to help users know exactly where they are in the process. | Make it difficult to distinguish between completed, current, and upcoming steps. |
| Use visual markers like icons or numbers to indicate progress and guide users through the steps. | Clutter the stepper with excessive details that might overwhelm users. |
| Provide directional controls if the process requires users to navigate back and forth between steps. | Allow navigation to steps that depend on completion of previous steps without proper validation. |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://designsystem.dubai.ae/components/steppers/timeline.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.