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.

Adding RadioButton to Your Project

Here's an example of how you can use the RadioButton widget in your project:

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.
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.

Changing Option Name

To change the name of the option:

Select RadioButton from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Define Options section.
Find the Option 1 property and change the name.

Adding or Removing Option

To add or remove an option from the RadioButton:

Select RadioButton from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Define Options section.
Click on the Add Option text.
Enter the name in Option 2 Text.
To remove the option, simply click on the cancel icon () displayed in the Option name property.

Setting Initial Option

When you run the app, no option is selected by default.

To set the initial option:

Select RadioButton from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Initial Option property.
Enter the name of the option. For example, entering a value as Jupiter will show the second option selected on running the app.

To set the Initial option from Firestore Data, please follow the instructions here.

Styling Selected Option

To change the text style of the selected option:

Select RadioButton from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Text Style section.
Checkmark the Change Selected Text Style. (Click on it)
Under the Radio Button Selected Text Style section, change the text style using the instructions here.

Retrieving RadioButton Selection

Let's build an example of showing the selected option in a Text widget.

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:

Add the Text widget to your page.
Move to property editor and click on the Set from Variable text. (This will open a new panel)
Set the Source to Widget State.
Set the Available Options to RadioButton.
(Optional) Set the default value if you wish to.
Click Save.

Select Value From Firestore Data

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.

1. Prerequisites

Before we fetch data from Firestore, make sure you incorporate all the mentioned prerequisites to have some data in Firestore.

Be familiar with Structuring the Firebase Database.
Complete all steps in the Firebase Setup section for your project.
Create a Collection called Todos.
Add Data to Collection.

A record/document inside the Todos collection should look similar to the following:

2. Querying a Single Document

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:

Select a page.
Click on the Backend Query tab (on the right side of your screen).
Set the Query Type to Query Collection.
Scroll down to find the Collection dropdown and change it to your collection.
Set the Query Type to Single Documents.
Click on the + Filter to find the exact document/record.
Find the Field Name and click on the Unset and select a field on which you would like to apply the filter.
Find Relation dropdown, click on the Unset and choose the relation amongst the list.
Find the Value property and set it to an appropriate value.
Click Save.

3. Showing Values in RadioButton

To show value from document data into the RadioButton:

Select the RadioButton widget from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Initial Option section.
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.

Changing the Properties

The Properties Panel can be used to customize the appearance and behavior of your widget.

Add Padding

Here are the instructions on how to add padding.

Adjust the Alignment

Here are the instructions on adjusting the alignment.

Changing Options Height

To change the height of all options:

Select RadioButton from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Properties section.
Enter the desired height into the Option Height box.

Adding Space Around Option Text

To add some space around the option text:

Select RadioButton from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Properties section.
Find the Margin property and enter the values.
Click on the Refresh icon to 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.

Showing Options Horizontally

By default, all options are shown as if they were inside the Column widget. Using Axis property, you can change this behavior to display all options horizontally as if they are inside the Row widget.

To display all options horizontally:

Select RadioButton from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Properties section.
Find the Axis property, change it to Horizontal.

Aligning Options

Changing the alignment will change how the options are distributed in the horizontal space.

To change the option alignment:

Select RadioButton from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Properties section.
Find the Alignment dropdown and select from the options displayed that include Start, Center, End.
If the Axis property is set to Horizontal, you will see options that include Start, Center, End, Space evenly, Space between, and Space around.

Changing Button Position

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:

Select RadioButton from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Properties section.
Find the Button Position property, change it to Right.

Styling Radio Button

To change the color of selected and unselected options:

Select RadioButton from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Radio Button Properties section.
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.
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.