🔘Radio buttons (Single select)

This feature allows you to create single select option input component within a form.

👉 The tags

To achieve this, you need to set up each group to the same form value variable in the binding (so it’s send as a unique variable) and there are several tags need to be configured for proper functionality:

1. 
[input-state-set]: Defines the setup of a component with an input and states.

2. [input-group:<single>:{identifier-name}] Defines the functionality for a single select of the radio button. All groups must have the same name.

3. [input-value:{value}]: This tag sets the value of the element that will be send if active when form submits. It is optional as this can be set using binding or static binding.

4. 

[state:default] and [state:active] sets the different states for the elements.

🏷️ How to add the tag

In this example, we've created an input group featuring three options: Madrid, Barcelona, and Valencia. The input group functions as a single-select radio button.

1. Create stateful components by designing both the active [state:active] and default [state:default] states for each radio button. Additionally, you can use the pressed state [state:pressed].

2. Ensure these components are appropriately grouped for each option. In this example, we have three groups: Select Madrid, Select Barcelona and Select Valencia .

3. Add the tag [input-state-set] to each group. Also add the tag [input-group:single:{identifier-name}] to add the single-select functionality. All groups must have the same {identifier-name} . In our example, the identifier name is blue.

4. Optionally, you can incorporate the tag [input-value:{value}] to the active state to set the value that you want to save to your backend. In our example, the value is Madrid for the Select Madrid group.

5. Repeat the same steps with the other existing options.

6. Make sure there is a submit button with the [action:submit] tag to submit the form.

🔌 Binding with the API

For this example we'll be using Xano as our backend. In our database, we have a user table with a simple text field called city which we want to connect to our single-select option input radio button component.

You should have completed setting up the API POST or PATCH request in order to bind data. See here how to Set up an API POST request.

POST API request in Bravo

As you'll see in the image above, we're using a unique variable ${city} for the three city options : Madrid, Barcelona and Valencia.

Binding section

In this example, we're going to bind the group component "Select Madrid". To bind:

1. On the left side of the screen, under "Elements," select the group element representing the radio button. Alternatively, you can choose the element directly from the image in the middle of the screen.

2. On the right-hand side, under "Form Data," connect the form input to the request variable. To achieve this, choose your data collection, the POST request, and finally, the variable named city.

3. Repeat Step 1 and Step 2 for the remaining available options.

💾 Example File

Bravo sample: Radio buttons & Multiple selection | Figma CommunityFigma

If you're looking to set up checkboxes with multiple-select functionality, refer to:

☑️pageCheckboxes (Multiple select)