> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/governed-dashboards-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/governed-dashboards-1/charts-gallery/filters/radio-button.md).

# Radio Button

{% hint style="success" %}
*Check out the below given walk-through on how to use the Radio Button filter component in Designer module.*
{% endhint %}

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FbCx0eJtRmewoDvNuv67J%2FRadio%20Button%20Filter.gif?alt=media&#x26;token=29971141-f1df-413e-877b-60be24a396dd" alt=""><figcaption></figcaption></figure>

The Radio Button component helps to filter data on other components.

## **Default Component Image**

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FkIBNmZMqPhT1n1jGgj76%2FDefault%20Component%20Image.png?alt=media\&token=cdbcd94e-cc50-4b25-97d2-4a40fd01cbaa)

## **Properties of the Radio Button**

### **Background**

The user can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.

![](https://2847660295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTmpwImm2wvMpv2GGC779%2Fuploads%2FSeu65DuU8o9SbNeNUdVH%2Fimage.png?alt=media\&token=4b1dba8b-a572-44fe-8422-4473697b3398)

### **General**

* The user can change the height, width, top, left.&#x20;
* If the ***Initial Visibility*** option is not enabled, then the chart won’t be available for the first preview.&#x20;
* The user can view the Radio button either in the form of Button or as radio.&#x20;
* Please note that in this case, the selected View Type is Enhance Button.&#x20;
  * Font color-size-family-style can be modified for button from the General Properties.&#x20;
  * Also, the spacing between the buttons can be adjusted.&#x20;
  * Selection color can be set, so as to identify which button user has selected.&#x20;
  * Chrome color sets the background color for these buttons also its transparency can be changed.
  * Orientation can be changed between horizontal or vertical. Also enable Notify GV update so that whatever value user update/click in the button, its value gets updated in the connection.

&#x20;          ![](https://2847660295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTmpwImm2wvMpv2GGC779%2Fuploads%2FQEWSzCnx6RhSQqFd998c%2Fimage.png?alt=media\&token=6debd1ef-8db6-4037-9e1e-17d29958ecc6)

<figure><img src="https://2847660295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTmpwImm2wvMpv2GGC779%2Fuploads%2FmlPONrA2mGLsMkekqKqd%2FRadio%20button%20enhancement.gif?alt=media&amp;token=1f8553c6-e6d8-4165-9ae5-581871e9a4d6" alt=""><figcaption><p>Modifying the Radio Button component with newly added Properties</p></figcaption></figure>

## **Modified Radio Button after changing its properties**

![](https://2847660295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTmpwImm2wvMpv2GGC779%2Fuploads%2F93BKiAxmFids4zfZMgug%2Fimage.png?alt=media\&token=c3165244-0241-4337-8bcb-961407caa75c)