Links

Checkbox

The Checkbox widget can allow users to select multiple options from a list and turn on or off any setting in your app. For example, you could use it to get an agreement on your terms and conditions.
Checkbox

Adding Checkbox

Let's see how to add a checkbox widget and build an example that shows its value on a Text widget. Here's how it looks:
Show Checkbox value
Here is a simple way to do it:
  • First, click on the + Add Widget, drag the Checkbox widget from the Base Elements tab, or add it directly from the widget tree.
  • Below the Checkbox, add a Text widget, move to the properties panel, click on Set from Variable and choose the Widget State > checkboxValue (i.e., name of your checkbox).
Adding checkbox widget

Setting initial value

You might want to show the checkbox with a default value, either check or uncheck. For example, showing the checked checkbox for travel insurance.
To set the initial value:
  • Select the Checkbox widget, move to the properties panel, and see the Checkbox Initial Value property.
  • Use the checkbox to set this value manually or click Set from Variable to set it based on the dynamic value. If you choose Set from Variable, ensure you pass the boolean value from the source (e.g., API response, Firestore document field).
Setting initial value

Saving checkbox value

You might want to save the checkbox's value as soon as it is checked or unchecked. For example, saving in a local state variable or Firestore document field. You can do so by adding the action on the checkbox widget.
The checkbox widget provides you with the following types of actions (aks callbacks), and you can choose any of them to add actions under it.
  1. 1.
    On Toggled On: Actions added under this will be triggered whenever the checkbox is selected/checked.
  2. 2.
    On Toggled Off: Actions added under this will be triggered whenever the checkbox is unselected/unchecked.
Here's how you do it:
  • Select the Checkbox widget, select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
  • Select On Toggled On or On Toggled Off and add an action that will update the value. (e.g., update local state, update Firestore record, etc.)
Saving checkbox value

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

Changing color

To change the checkbox colors:
  • Select the Checkbox widget, move to the properties panel, and scroll down to the Checkbox Properties section.
  • To change the color of the checkbox when it is selected and unselected, use the Checked Color and Unchecked Color properties, respectively.
  • To change the color of the check icon, use the Check Color property.

Add rounded corners

To change the rounded corner for this widget:
  • Select the Checkbox widget, move to the properties panel, and scroll down to the Checkbox Properties section.
  • Find the Border Radius property and enter the values for TL(Top Left), TR(Top Right), BL(Bottom Left), and BR(Bottom Right). Use the
    Lock button to change all values at the same time. Unlocking will allow you to adjust each value separately.
Add rounded corners

Make it circular

If you want to make the checkbox circular in shape, select the Checkbox widget, move to the properties panel, find the Circular Check property and enable it.
Circular checkbox

Add padding

​Here are the instructions on how to add padding.

Adjust alignment

​Here are the instructions for adjusting the alignment.