Comment on page
RadioButton
The RadioButton widget is used to allow a user to select one option from multiple selections.
You can use the RadioButton widget for implementing a single selection such as gender selection, notification preferences, etc.

RadioButton
Here's an example of how you can use the RadioButton widget in your project:
- 1.First, drag the Column widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree. Set its Cross Axis Alignment to Stretch.
- 2.Now add the RadioButton widget from the Form Elements tab or add it directly from the widget tree.
The RadioButton widget adds a single option named Option 1 by default.

To change the name of the option:
- 1.Select RadioButton from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Define Options section.
- 3.Find the Option 1 property and change the name.
.gif?alt=media&token=aa6759f7-17f4-4351-abc5-2c0c629e4213)
To add or remove an option from the RadioButton:
- 1.Select RadioButton from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Define Options section.
- 3.Click on the Add Option text.
- 4.Enter the name in Option 2 Text.
- 5.To remove the option, simply click on the cancel icon () displayed in the Option name property.
.gif?alt=media&token=441d6656-b87d-406a-b01a-7aa6c2858e37)
When you run the app, no option is selected by default.
To set the initial option:
- 1.Select RadioButton from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Initial Option property.
- 3.Enter the name of the option. For example, entering a value as Jupiter will show the second option selected on running the app.
.gif?alt=media&token=b6620640-58a0-4aeb-9912-b380d3e0354c)
To change the text style of the selected option:
- 1.Select RadioButton from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Text Style section.
- 3.Checkmark the Change Selected Text Style. (Click on it)
- 4.Under the Radio Button Selected Text Style section, change the text style using the instructions here.
.gif?alt=media&token=20cedfe8-d0a9-4448-94d6-ad925a8f15e5)
Let's build an example of showing the selected option in a Text widget.
.gif?alt=media&token=ab802eb4-206c-40b8-9df0-9d3ca2e3ddd0)
For simplification purposes, the selected option is shown in the Text widget. In a real-world scenario, you may pass the RadioButton selection to your Backend (Firestore Database/API call). Learn more about passing UI data and creating a record on Firestore Database here.
To retrieve the user's selection:
- 1.
- 2.Move to property editor and click on the Set from Variable text. (This will open a new panel)
- 3.Set the Source to Widget State.
- 4.Set the Available Options to RadioButton.
- 5.(Optional) Set the default value if you wish to.
- 6.Click Save.
.gif?alt=media&token=7b0451db-14b3-4035-a136-37fd89c8507c)
You may be using the Firstore to store your app data in the collection-document model. Let's see an example of showing the Repeat value of the Todo item inside the RadioButton from the Firestore data.

Before we fetch data from Firestore, make sure you incorporate all the mentioned prerequisites to have some data in Firestore.
- 1.
- 2.
- 3.
A record/document inside the Todos collection should look similar to the following:

Querying a single document on a page helps you retrieve the document data that may contain the value to display on RadioButton.
To query a single document on page:
- 1.Select a page.
- 2.Click on the Backend Query tab (on the right side of your screen).
- 3.Set the Query Type to Query Collection.
- 4.Scroll down to find the Collection dropdown and change it to your collection.
- 5.Set the Query Type to Single Documents.
- 6.Click on the + Filter to find the exact document/record.
- 7.Find the Field Name and click on the Unset and select a field on which you would like to apply the filter.
- 8.Find Relation dropdown, click on the Unset and choose the relation amongst the list.
- 9.Find the Value property and set it to an appropriate value.
- 10.Click Save.
.gif?alt=media&token=929ed110-20fb-46e7-8662-1c79879a99a8)
To show value from document data into the RadioButton:
- 1.Select the RadioButton widget from the widget tree or from the canvas area.
- 2.Move to the Property Editor and scroll down to the Initial Option section.
- 3.Click on the Set from Variable on the right. (This will open a new panel)
- 1.Find the Source dropdown, click on unset and select the [collection] Record (from PageName).
- 2.Under the Available Options, click on Unset and select the field that holds the value to be shown inside the RadioButton.
- 3.Click Save.
.gif?alt=media&token=c6926248-8ca4-4837-84d5-0cdc638a6be0)
To change the height of all options:
- 1.Select RadioButton from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Properties section.
- 3.Enter the desired height into the Option Height box.
.gif?alt=media&token=10c9a797-531d-4965-84cb-4306640c712c)
To add some space around the option text:
- 1.Select RadioButton from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Properties section.
- 3.Find the Margin property and enter the values.
- 4.Click on the Refresh iconto reset the values.
Use the
Lock button to change the Left, Top, Right, and Bottom padding all at the same time. Unlocking will allow you to modify each value separately.

.gif?alt=media&token=2c495562-4ceb-4855-a183-2b60bfa75809)
To display all options horizontally:
- 1.Select RadioButton from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Properties section.
- 3.Find the Axis property, change it to Horizontal.
.gif?alt=media&token=e5b75e0d-08e1-482a-8506-22f7fa058a98)
Changing the alignment will change how the options are distributed in the horizontal space.
To change the option alignment:
- 1.Select RadioButton from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Properties section.
- 3.Find the Alignment dropdown and select from the options displayed that include Start, Center, End.
- 4.If the Axis property is set to Horizontal, you will see options that include Start, Center, End, Space evenly, Space between, and Space around.
.gif?alt=media&token=231143e3-3b07-47e3-b435-936c4e2629c6)
If you want to display the button on the opposite side of the option text i.e right side, you can do so using the Button Position property.
To change the button position:
- 1.Select RadioButton from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Properties section.
- 3.Find the Button Position property, change it to Right.
.gif?alt=media&token=413c1498-f5e9-49f6-b7be-1a2524c4d639)
To change the color of selected and unselected options:
- 1.Select RadioButton from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Properties section.
- 3.Find the Selected Color property, click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
- 4.Find the Unselected Color property, click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
.gif?alt=media&token=c53ff231-2c63-4479-ba11-5616a5e6f702)
Last modified 4mo ago