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.

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:

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

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

Saving checkbox value

You might want to save the checkbox's value as soon as it is checked or unchecked. For example, saving in an app 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 (aka callbacks), and you can choose any of them to add actions under it.

On Toggled On: Actions added under this will be triggered whenever the checkbox is selected/checked.
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 app state, update Firestore record, etc.)

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.

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.

Disable Checkbox

You may need to disable a checkbox if certain conditions aren't met. For instance, users should only be able to use the 'Same as Shipping Address' checkbox when a shipping address is provided.

To disable a checkbox, move to the Properties Panel > turn on the Checkbox Disable Options > click Unset, and set the Condition. Once set, you could also customize the disabled state colors using the Disabled Check Color property.