# Select Input Field

## Overview

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

## Usage

### When to use this component?

Select fields are used in forms and other input scenarios where users need to choose from a predefined list of options. They are especially useful in situations with many options, as a dropdown list conserves space and simplifies the selection process.

### How it works

A select field component typically includes a label, a dropdown list of options, and optional elements like placeholder text and helper text to assist users. It can display different states, such as focused, filled, or error, to indicate its current status. The select field can be configured to allow single or multiple selections, depending on the specific requirement.

### Code

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

```jsx
<dda-select
    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"}]'
    label="Select an option"
    placeholder="Please select..."
    selected="0"
    disabled="false"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    validation_id="validationId"
    size="default"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="select"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
></dda-select>    
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaSelect
    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"}]'
    label="Select an option"
    placeholder="Please select..."
    selected="0"
    disabled="false"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    validation_id="validationId"
    size="default"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="select"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
></DdaSelect>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaSelect
    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"}]'
    label="Select an option"
    placeholder="Please select..."
    selected="0"
    disabled="false"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    validation_id="validationId"
    size="default"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="select"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
></DdaSelect>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-select
    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"}]'
    label="Select an option"
    placeholder="Please select..."
    selected="0"
    disabled="false"
    helper_text="Helper or footer text"
    error_message=""
    validation_type="normal"
    validation_id="validationId"
    size="default"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="select"
    toggle_button_name="toggle_button"
    option_select_button_name="option_button"
></dda-select>
```

{% endtab %}
{% endtabs %}

### Properties

For version 3.12.0+ you can use the new unified [input interactions](/developers/input-interactions.md) to set/get data from the components.

| Property                    | Description                                                                                                                                                                                                       | Type      |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `label`                     | The text that will be displayed as the label for the select input. It provides a description or instruction for the user about the input field.                                                                   | `string`  |
| `placeholder`               | Text shown inside the select when no option is selected (non-selectable)                                                                                                                                          | `string`  |
| `selected`                  | The currently selected option from the dropdown. This value is displayed on the button as the selected option.                                                                                                    | `string`  |
| `disabled`                  | If set to `true`, the select dropdown will be disabled, preventing user interaction.                                                                                                                              | `boolean` |
| `helper_text`               | Additional text that provides guidance or hints to the user, usually displayed below the select input field.                                                                                                      | `string`  |
| validation\_type            | A string used to specify the validation style for the input field, such as  `'normal'` ,   `'error'` , or any custom validation type.                                                                             | `string`  |
| `error_message`             | A message that will be displayed when the `error` prop is set, typically used to display validation errors.                                                                                                       | `string`  |
| `validation_id`             | The unique identifier for the select field. It is used for associating the label with the input and can also be used for targeting the field programmatically.                                                    | `string`  |
| `size`                      | Specifies the size of the input field (e.g., `small`, `medium`, `large`). This can be used to apply different sizing classes.                                                                                     | `string`  |
| `custom_class`              | A custom CSS class to be applied to the component for additional styling customization.                                                                                                                           | `string`  |
| `component_mode`            | A mode or state that can be used to modify the component’s behavior or appearance based on different configurations, such as ‘read-only’ or ‘edit’.                                                               | `string`  |
| `button_id`                 | The `id` attribute of the select button. It helps uniquely identify the button and is typically used for accessibility purposes or styling.                                                                       | `string`  |
| `aria_label`                | Provides an accessible label for screen readers. It helps improve accessibility by describing the button's purpose for users with disabilities.                                                                   | `string`  |
| `toggle_button_name`        | Name attribute which toggles the dropdown                                                                                                                                                                         | `string`  |
| `option_select_button_name` | Name attribute for the dropdown option selections                                                                                                                                                                 | `string`  |
| `options`                   | A JSON string representing an array of options to be displayed in the dropdown. Each option is displayed as a clickable item. Ensure the string is valid JSON formatted like `["Option1", "Option2", "Option3"]`. | `string`  |

## Anatomy

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

### Anatomy Options

**Label**: Indicates the purpose of the dropdown, labeled as "Select" in this example.

**Placeholder**: Provides guidance on the action, displaying text like "Select Option" within the dropdown box before any option is selected.

**Lead-Icon**: Positioned at the beginning of the dropdown, offering a visual cue related to the dropdown’s function.

**Dropdown Icon**: A visual indicator (typically a down arrow) showing that additional options are available upon interaction.

**Caption**: Additional helper or footer text below the dropdown, offering more details or context for the user.

## Dos and Don'ts

| Dos                                                                              | Don'ts                                                                                                             |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Use select fields to present users with a list of options to choose from.        | Don't use select fields for inputs that are better suited to other input types, like text fields or radio buttons. |
| Label the select field clearly to indicate its purpose.                          | Avoid using ambiguous or unclear labels for select fields.                                                         |
| Include placeholder text to guide users on what to select.                       | Don't rely solely on placeholder text for essential instructions.                                                  |
| Provide helper text to explain any specific instructions or requirements.        | Don't overload the select field with too much information.                                                         |
| Ensure the select field is large enough to be easily tappable or clickable.      | Avoid making the select field too small to interact with comfortably.                                              |
| Use multiple select option when users need to select more than one option.       | Don't force users to use a single select field when multiple selections are needed.                                |
| Validate input and provide clear error messages when the selection is incorrect. | Don't provide generic error messages that don't help users understand the issue.                                   |
| Keep consistent styling and spacing across all select fields in the application. | Don't use inconsistent styles that may confuse users.                                                              |


---

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