# Radio buttons (Single select) This feature allows you to create single select option input component within a form. ## :point\_right: 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::``{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. ## :label: 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](https://docs.bravostudio.app/bravo-tags/components/stateful-component-like-button) 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](https://www.xano.com/) 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](https://docs.bravostudio.app/connect-api/set-up-api-requests/creating-an-api-collection/airtable/data-library-connect-to-any-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. ## :floppy\_disk: Example File {% embed url="" %} If you're looking to set up checkboxes with multiple-select functionality, refer to: {% content-ref url="checkboxes-multiple-select" %} [checkboxes-multiple-select](https://docs.bravostudio.app/bravo-tags/form-and-input-fields/stateful-input/checkboxes-multiple-select) {% endcontent-ref %}