# Segmented Controls

## Overview

<figure><img src="/files/ijKbQq69KaZ2mDx6YLb1" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Segmented controls are ideal when users need to choose between a few distinct options, such as in settings panels, toolbars, or other interfaces requiring quick configuration changes. They work well for toggling between related options where only one selection is allowed at a time.

### How it works

Segmented controls present a series of related options in a compact, unified interface. Users select one option, which updates the control’s state to reflect their choice. Each segment displays different states—such as selected or unselected—providing clear visual feedback on the current configuration.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-segmented-tabs
    radius_type="square"
    custom_class=""
    component_mode=""
    button_name="button"
    items='["All","Recent","Saved"]'
></dda-segmented-tabs>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaSegmentedTabs
    radius_type="square"
    custom_class=""
    component_mode=""
    button_name="button"
    items='["All","Recent","Saved"]'
></DdaSegmentedTabs>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaSegmentedTabs
    radius_type="square"
    custom_class=""
    component_mode=""
    button_name="button"
    items='["All","Recent","Saved"]'
></DdaSegmentedTabs>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-segmented-tabs
    radius_type="square"
    custom_class=""
    component_mode=""
    button_name="button"
    items='["All","Recent","Saved"]'
></dda-segmented-tabs>
```

{% endtab %}
{% endtabs %}

### Properties

| Property         | Description                                                                                                                                                                                                                                                                                                                | Type     |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `component_mode` | Optional parameter that defines a specific mode or variant of the component. options are 'light' or 'dark'.                                                                                                                                                                                                                | `string` |
| `custom_class`   | Additional CSS class(es) to be applied to the segmented tabs container. Allows for custom styling and modifications.                                                                                                                                                                                                       | `string` |
| `items`          | <p></p><p>A JSON string that will be parsed into an array of strings. Each string represents a tab item. If an item starts with 'fo', it will be rendered as a Material Icons icon; otherwise, it will be rendered as text.</p><ul><li><strong>Example</strong>: <code>'\["Home", "fohouse", "Settings"]'</code></li></ul> | `string` |
| `radius_type`    | <p></p><p>Determines the border radius styling of the segmented tabs group. Applied as a CSS class to the container element.</p><ul><li><strong>Example</strong>: <code>'rounded'</code> or <code>'square'</code></li></ul>                                                                                                | `string` |
| `buttons_name`   | Name attribute for the segment buttons                                                                                                                                                                                                                                                                                     | `string` |

## Anatomy

<figure><img src="/files/OegnEsIx5NF5Qdh6IGSW" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Lead-Icon**: Positioned at the start of the segmented control to provide a visual cue related to the content.

**Segment Label**: Describes the segment, indicating different sections within the control (e.g., "All," "Recent," "Saved").

**Divider**: Separates the segments visually, creating clear boundaries between each selectable option.

**Trail-Icon**: Positioned at the end of the segmented control, providing an additional visual element for context or functionality.

## Dos and Don'ts

| Dos                                                                                           | Don'ts                                                                                 |
| --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| Use segmented controls to group related options that are mutually exclusive.                  | Don't use segmented controls for actions that can be performed simultaneously.         |
| Label each segment clearly to indicate its purpose.                                           | Avoid using vague or unclear labels for segments.                                      |
| Ensure each segment is large enough to be easily tapped or clicked.                           | Don't make segments too small to interact with comfortably.                            |
| Use segmented controls in contexts where quick and frequent configuration changes are needed. | Avoid using segmented controls for complex configurations that require detailed input. |
| Provide visual feedback to indicate the selected segment.                                     | Don't leave the user guessing which segment is currently selected.                     |
| Keep the number of segments manageable to avoid overwhelming the user.                        | Don't use too many segments, which can reduce usability and clarity.                   |


---

# 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/segmentation/segmented-controls.md?ask=<question>
```

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.