📄Dropdown selector

Creates a selector input component.

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: The 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, which will take the value of the chosen option.

👉 The Tags

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.

[component:input-select]

Note: This input component is part of a form and should include a [action:submit] tag.

Static data from Figma

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

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

Example:

[component:input-select:pet1=Cat, pet2=Dog, pet3=Bird]

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

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

Example:

[component:input-select:Cat, Dog, Bird] In case you want to define static empty options, follow:

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

The [component:input-select]component does not support the :required 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.

Example:

[component:input-select:pet1=Cat, pet2=Dog, pet3=Bird, =None]

How to set up static tag in Figma for a dropdown selector component

Dynamic data from an API

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.

2. Add the tag [component:input-select] in a text component in the design file.

Don't surround the labels/values with commas and don't add any spaces inside the tag.

3. Import the design file 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 beforehand.

5. Bind the input-select element to the Form data property to the variable defined in the POST request body 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.

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

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

Bravo sample: Form Input FieldsFigma