Dropdown selector
Creates a selector input component.
Last updated
Was this helpful?
Creates a selector input component.
Last updated
Was this helpful?
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 , which will take the value of the chosen option.
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
Note: This input component is part of a form and should include a [action:submit] tag.
To define the selector options statically within the tag, use:
Example:
[component:input-select:pet1=Cat, pet2=Dog, pet3=Bird]
If you want the static options label and value to match:
Example:
[component:input-select:Cat, Dog, Bird]
In case you want to define static empty options, follow:
Example:
[component:input-select:pet1=Cat, pet2=Dog, pet3=Bird, =None]
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.
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.
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.
Optionally, you can bind the Form Initial Value to a GET request. This is useful if you enable data editing.
Finally, bind the Form response actions (On success or On Error).
Now, the selector input component should be ready! Test and preview it on Bravo Vision. 🚀
Duplicate the files below to see how to set it up!
The [component:input-select]component does not support the 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.
In the Figma design, make sure to create this tag within a .
into Bravo if not done yet. If already imported, sync the file and go to the app's binding section.
Ensure you have created a valid beforehand.
Bind the input-select element to the Form data property to the variable defined in the 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.
