📄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 will be the list of choices for the selector input. Each option will have two properties: label and value. The label will be the text the user sees when using the selector input, while the value will be the data associated to that label and sent to the API endpoint. The label and value can be the same. The options can be set statically in the design file, or bound 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.
📍 Where to add the tag: A text component inside a form.
👉 The Tag
The dropdown selector component allows users to select one option out of multiple.
Both the values for the options and the option selected can be bound to API. This component must be created inside a form, containing a submit action.
In case you want to define the selector options statically in the tag:
Static data from Figma
In case you want the static options label and value to be the same:
In case you want to define static empty options:
Dynamic data from an API
If you want to have a Dynamic data Dropdown, you will need a backend, you will have to create a collection with Bravo and you will have to do the binding
Binding
1. This tag must be created inside a form. It should be inside a container with a submit action, and an associated POST request.
2. Add the label in a text component in the design file.
If you want to bind the options to API data, use [component:input-select].
If you want to define the options statically, specify the labels and values in the tag:
[component:input-select:value1=label1,value2=label2,value3=label3].
You can also indicate empty options with =None:
[component:input-select:value1=label1,value2=label2,=None]
Or define options where the value and the label are the same:
[component:input-select:label1,label2,Other].
Don't surround the labels/values with commas, and don't add any spaces inside the tag.
3. Import the design file into Bravo, and go to the Data Binding section. You should have created a valid POST request beforehand. This request will be used to send the form where the selector input is placed.
In this section, you'll find the selector input field and its bindable properties.
4. Bind the Value property to API data, in case you want to do so. It will replace the placeholder text from Figma.
5. Bind the Options property to API data, in case you didn't define the options statically in the design file. You'll need to bind the main Options property to a list data record, and the Label and Value properties to data items inside the list.
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.
6. Finally, bind the Input Destination 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.
7. Now, the selector input component should be ready! Import to Bravo Studio & preview on Bravo Vision 🚀
(If you imported the app before, you just need to press the button Update in Bravo Studio to see the changes).
💾 Example files
Duplicate the files below to see how to set it up!
Last updated
