# Quick Select Field

## Overview

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

## Usage

### When to use this component?

Quick Select components are ideal for scenarios where users need to choose an option swiftly from a list, such as in navigation menus, settings, or any interface requiring quick access to options. This component can be styled as a button, icon, link, or a combination, depending on the context and design needs.

### How it works

A Quick Select component includes a visible trigger (such as a button, icon, or link) that opens a dropdown list of options when clicked. Users select an option from the list, and the component updates to reflect the chosen item. Optional elements like leading icons, labels, or titles can be added to provide further context or functionality, enhancing the user experience.

### Code

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

```jsx
<dda-dropdown
    label="Headline"
    placeholder="Please select..."
    main_aria_label="Please choose an option"
    selected=""
    disabled="false"
    error_message="This is a error message"
    helper_text="Helper or footer text"
    validation_id=""
    type="bg-white"
    size="default"
    icon_mode="false"
    custom_class=""
    component_mode=""
    button_id="dropdown"
    aria_label="dropdown"
    arrow_button_name="arrow-button"
    dropdown_button_name="dropdown-button"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
    selectchanged=""
    options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
></dda-dropdown>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaDropdown
    label="Headline"
    placeholder="Please select..."
    main_aria_label="Please choose an option"
    selected=""
    disabled="false"
    error_message="This is a error message"
    helper_text="Helper or footer text"
    validation_id=""
    type="bg-white"
    size="default"
    icon_mode="false"
    custom_class=""
    component_mode=""
    button_id="dropdown"
    aria_label="dropdown"
    arrow_button_name="arrow-button"
    dropdown_button_name="dropdown-button"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
    selectchanged=""
    options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
></DdaDropdown>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaDropdown
    label="Headline"
    placeholder="Please select..."
    main_aria_label="Please choose an option"
    selected=""
    disabled="false"
    error_message="This is a error message"
    helper_text="Helper or footer text"
    validation_id=""
    type="bg-white"
    size="default"
    icon_mode="false"
    custom_class=""
    component_mode=""
    button_id="dropdown"
    aria_label="dropdown"
    arrow_button_name="arrow-button"
    dropdown_button_name="dropdown-button"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
    selectchanged=""
    options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
></DdaDropdown>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-dropdown
    label="Headline"
    placeholder="Please select..."
    main_aria_label="Please choose an option"
    selected=""
    disabled="false"
    error_message="This is a error message"
    helper_text="Helper or footer text"
    validation_id=""
    type="bg-white"
    size="default"
    icon_mode="false"
    custom_class=""
    component_mode=""
    button_id="dropdown"
    aria_label="dropdown"
    arrow_button_name="arrow-button"
    dropdown_button_name="dropdown-button"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
    selectchanged=""
    options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
></dda-dropdown>
```

{% endtab %}
{% endtabs %}

### Properties

| Property               | Description                                                                                                                | Type                             |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| `label`                | The label displayed above the dropdown, indicating the purpose of the field.                                               | `string`                         |
| `selected`             | The currently selected option from the dropdown. If no option is selected, it can be an empty string.                      | `string`                         |
| `disabled`             | Disables the dropdown, preventing the user from interacting                                                                | `boolean`                        |
| `error`                | Displays an error message below the dropdown when provided. Used for validation or feedback.                               | `string`                         |
| `helper_text`          | Additional information or a hint that appears below the dropdown to assist the user.                                       | `string`                         |
| `validation_id`        | A unique ID for connecting the dropdown to validation logic or elements.                                                   | `string`                         |
| `type`                 | Defines the background style for the dropdown, either transparent or white.                                                | `"bg-transparent" \| "bg-white"` |
| `size`                 | Defines the size of the dropdown, allowing it to be either small or medium.                                                | `"medium" \| "small"`            |
| `icon_mode`            | When `true`, it activates an icon-based mode where the dropdown options are visually represented by icons instead of text. | `boolean`                        |
| `custom_class`         | An optional custom class to apply additional styling to the dropdown component.                                            | `string`                         |
| `component_mode`       | A custom mode for the component that allows for further customization or style variations.                                 | `string`                         |
| `button_id`            | The unique ID of the dropdown button, used for accessibility and form submission purposes.                                 | `string`                         |
| `aria_label`           | An optional aria-label for better accessibility, providing a label for screen readers.                                     | `string`                         |
| `arrow_button_name`    | Name attribute for the dropdown arrow icon                                                                                 | `string`                         |
| `dropdown_menu_button` | Name attribute for the dropdown selections                                                                                 | `string`                         |
| `options`              | A JSON string representing an array of options to display in the dropdown. The string is parsed into an array.             | `string`                         |

## Anatomy

<figure><img src="/files/4Ov5Byb7HIu9kOcL6FOe" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: Provides a title or description for the dropdown, helping users understand the purpose of the selection.

**Lead-Icon**: Positioned before the dropdown text, visually indicating the context or category of the options within the dropdown.

**Placeholder**: Displays default or prompt text within the dropdown, guiding users on what to select.

**Dropdown Icon**: Positioned at the right of the dropdown, indicating that there are additional options available.

## Dos and Don'ts

| Use Quick Select components for fast access to a list of options.                         | Don't use Quick Select components for complex forms or multi-step processes.           |
| ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| Label the Quick Select component clearly to indicate its purpose.                         | Avoid using ambiguous or unclear labels for Quick Select components.                   |
| Ensure the trigger element is large enough to be easily tappable or clickable.            | Don't make the trigger element too small to interact with comfortably.                 |
| Provide clear visual feedback when an option is selected.                                 | Don't leave users guessing whether their selection was successful.                     |
| Use consistent styling and spacing across all Quick Select components in the application. | Don't use inconsistent styles that may confuse users.                                  |
| Validate input and provide clear error messages when necessary.                           | Don't provide generic error messages that don't help users understand the issue.       |
| Include appropriate aria-labels for accessibility.                                        | Don't neglect accessibility requirements such as focus states and keyboard navigation. |
| Ensure each Quick Select component has sufficient contrast against its background.        | Avoid using low contrast that can make the component difficult to see.                 |


---

# 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/quick-select-field.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.