# Dropdown selector

The selector input contains the following properties:

* **Placeholder Value**: the text that will appear as a placeholder, before the user chooses an option. It can be set statically in the design tool, or bound to API data.
* **Options**: This list consists of choices for the selector input. Each choice includes:

  * **Label: T**he text visible to the user in the dropdown selector.
  * **Value**: Represents the data sent to the API. 

  The label and value can be identical and the options can be statically set in the design file or dynamically linked to API data.
* **Input Destination**: This will be the variable defined in the [POST request body](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/data-library-connect-to-any-api-post-request.md#how-to-set-up-a-post-request), which will take the value of the chosen option. 

## 👉 **The Tags** <a href="#the-tags" id="the-tags"></a>

The dropdown selector component allows users to choose one option from multiple choices. It can be used either statically or dynamically bound to an API.

**📍 Where to add the tag:** A **text** component inside a [form.](/bravo-tags/form-and-input-fields/data-biding-send-form-input-to-a-database.md)

```
[component:input-select]
```

**Note:** This input component is part of a form and should include a <mark style="color:red;">`[action:submit]`</mark> tag.

## Static data from Figma <a href="#static-data-from-figma" id="static-data-from-figma"></a>

To define the selector options statically within the tag, use:

```
[component:input-select:value1=label1,value2=label2,value3=label3]
```

Example:&#x20;

<mark style="color:red;">`[component:input-select:pet1=Cat, pet2=Dog, pet3=Bird]`</mark>

If you want the static options **label** and **value** to match:

```
[component:input-select:Label1,Label2,Label3]
```

Example:

<mark style="color:red;">`[component:input-select:Cat, Dog, Bird]`</mark>\
\
In case you want to define static **empty options,** follow:

```
[component:input-select:value1=label1,value2=label2,=None]
```

{% hint style="warning" %}
The <mark style="color:red;">`[component:input-select]`</mark>component **does not support the** [<mark style="color:red;">`:required`</mark>](/bravo-tags/form-and-input-fields.md#adding-a-required-input-field) attribute and **requires an option selection by default**.  However its possible to add an empty option such as "=None" so users can select an empty value.
{% endhint %}

Example:&#x20;

<mark style="color:red;">`[component:input-select:pet1=Cat, pet2=Dog, pet3=Bird, =None]`</mark>

<figure><img src="/files/yURmQC4gRuw9ms7t890X" alt=""><figcaption><p>How to set up static tag in Figma for a dropdown selector component</p></figcaption></figure>

## Dynamic data from an API <a href="#dynamic-data-from-an-api" id="dynamic-data-from-an-api"></a>

To bind dynamic data to the dropdown selector, ensure you have an API collection ready in Bravo. Use a POST or PATCH request since this component is part of a form.

1. In the Figma design, make sure to create this tag within a [form](/bravo-tags/form-and-input-fields.md).
2. Add the tag <mark style="color:red;">`[component:input-select]`</mark> in a **text** component in the design file.&#x20;

![](/files/ny7KaYMlwXDJP50uD6DE)

{% hint style="warning" %}
Don't surround the labels/values with commas and don't add any spaces inside the tag.
{% endhint %}

3. [Import the design file](/good-to-know/faq/importing-a-design-file.md) into Bravo if not done yet. If already imported, sync the file and go to the app's binding section.
4. Ensure you have created a valid [POST request](/bravo-tags/intro-and-onboarding/post-login-page-onboarding.md) beforehand. &#x20;
5. Bind the `input-select` element to the **Form data** property to the variable defined in the [POST request body](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/data-library-connect-to-any-api-post-request.md#how-to-set-up-a-post-request) that you want to bind to the form. This body might have more variables, that you might want to bind to other input fields, in case the form has more.
6. Bind the **Options** property to a **list data record**. Set the **Label** and **Value** properties to the corresponding data from the API. Remember that the **Label** is the property the user will see in the app, while the **Value** is the actual data sent via API request. In this example below, those two properties are connected to the same data item, but they don't always have to.

![](/files/9U8wt4HwAUMeCA2vFjz1)

7. Optionally, you can bind the **Form Initial Value** to a **GET request.** This is useful if you enable data editing.
8. Finally, bind the **Form response actions (On success or On Error).**
9. Now, the selector input component should be ready! Test and preview it on **Bravo Vision**. 🚀

## 💾 Example files <a href="#example-files" id="example-files"></a>

Duplicate the files below to see how to set it up!

{% embed url="<https://www.figma.com/community/file/981976861747536392>" %}


---

# 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://docs.bravostudio.app/bravo-tags/form-and-input-fields/dropdown-selector.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.