# 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. 
<mark style="color:red;">`[input-state-set]`</mark><mark style="color:red;">:</mark> Defines the setup of a component with an input and states.
2. <mark style="color:red;">`[input-group:<single>:`</mark><mark style="color:green;">`{identifier-name}`</mark><mark style="color:red;">`]`</mark> Defines the functionality for a single select of the radio button. All groups must have the same name.
3. <mark style="color:red;">`[input-value:`</mark><mark style="color:green;">`{value}`</mark><mark style="color:red;">`]`</mark>: 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. 

<mark style="color:red;">`[state:default]`</mark> and <mark style="color:red;">`[state:active]`</mark> 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.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FxDCQDhFsVuCOTxp0yspm%2FRadio_buttons.jpg?alt=media&#x26;token=e38bbbec-7597-409a-9d6b-90b405c4cce1" alt=""><figcaption></figcaption></figure>

1. Create [stateful components](https://docs.bravostudio.app/bravo-tags/components/stateful-component-like-button) by designing both the active <mark style="color:red;">`[state:active]`</mark> and default <mark style="color:red;">`[state:default]`</mark> states for each radio button. Additionally, you can use the pressed state <mark style="color:red;">`[state:pressed]`</mark>.&#x20;
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 <mark style="color:red;">`[input-state-set]`</mark> to each group. Also add the tag <mark style="color:red;">`[input-group:single:`</mark><mark style="color:green;">`{identifier-name}`</mark><mark style="color:red;">`]`</mark> to add the single-select functionality.  All groups must have the same  <mark style="color:green;">`{identifier-name}`</mark> <mark style="color:green;"></mark><mark style="color:green;">.</mark> In our example, the identifier name is `blue`.
4. Optionally, you can incorporate the tag <mark style="color:red;">`[input-value:`</mark><mark style="color:green;">`{value}`</mark><mark style="color:red;">`]`</mark> 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 <mark style="color:red;">`[action:submit]`</mark> 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).

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FYObBiZh89YRQY5MUQj0P%2FScreenshot%202024-01-16%20at%2018.59.03.png?alt=media&#x26;token=05369705-eddd-4a32-b9ac-a4f248949221" alt=""><figcaption><p>POST API request in Bravo</p></figcaption></figure>

As you'll see in the image above, we're using a unique variable <mark style="color:red;">`${city}`</mark> for the three city options : Madrid, Barcelona and Valencia.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fq1kBfkwORhomELpNS82L%2FRadio_buttons%20(1).jpg?alt=media&#x26;token=8a0e1676-a385-4527-b4ab-5c557fd7cbc5" alt=""><figcaption><p>Binding section</p></figcaption></figure>

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="<https://www.figma.com/community/file/1329781281924541705>" %}

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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bravostudio.app/bravo-tags/form-and-input-fields/stateful-input/radio-buttons-single-select.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.