How do I group multiple Checkbox blocks so only one can be checked at a time?

The standalone Checkbox block has no built-in grouping — each is independent. To enforce single-selection, wire each checkbox's On Check Change event to a Trigger Component Method action that calls Set Value with Checked off on the other checkboxes, with a run condition so it only runs when the clicked checkbox is now checked. For a proper single-select group, use a Radio Group field inside a Form, or a Single-select Dropdown.

What is the "indeterminate" state on a Checkbox block and how do I use it?

The indeterminate state shows a dash inside the checkbox, indicating a partial or mixed selection — commonly used on a "select all" checkbox when only some child items are checked. It is a visual-only state: setting Indeterminate to True changes the appearance but the checkbox's actual boolean value remains unchanged. You manage the logic yourself (count checked children and set Indeterminate accordingly).

Why does clicking a checked Radio Button block uncheck it?

The standalone Radio Button block is a single boolean component — clicking it again toggles it off. This differs from native HTML radio groups where re-clicking a selected radio does nothing. If you need the standard radio-group behavior (where one option is always selected), use a Radio Group field inside a Form block, which provides proper single-selection-from-a-list behavior.

Does the Toggle block work on mobile apps?

Yes — the Toggle block is available on both web and native mobile (iOS and Android). The appearance adapts to the platform's native toggle style on mobile. The Show Toggle Label option lets you display or hide the on/off labels alongside the toggle handle on web; this option may behave differently in the mobile renderer.

Checkboxes, Radio & Toggle- UnifyApps

Note: Standalone vs. Form fields: Each block has a standalone version (drives page state immediately) and a Form field version (submits with the form's validation and data payload). This page covers both. For form fields, see Form Field Types for the full property reference.

unify-applications-checkboxes-radio-and-toggle-01-checkbox-block.png

Checkbox Block (Standalone)

A single standalone checkbox with a label, optional description and help text, and a boolean value. Supports an indeterminate "mixed" visual state and exposes methods to set or toggle the value from any interaction.

When to Use

A single yes/no choice that lives outside a form — a filter toggle, a "terms accepted" indicator.
A "select all" control driving other blocks — bind Indeterminate when some but not all children are selected.
For checkboxes inside a form submission, use the Form block's Checkbox field instead.

Properties

Property	Type	Default	Where to Set	Description
Label	string	—	Content → Label	Text shown next to the checkbox.
Description	string	—	Content → Description	Secondary line under the label.
Help Text	string	—	Content → Help Text	Additional information below the checkbox.
Checked	string (bindable → boolean)	—	Content → Checked	Initial checked state. Dynamic bindings update whenever the value changes — silently, without firing On Check Change.
Indeterminate	boolean	—	Content → Indeterminate	Shows the "mixed" visual state. Does not change the underlying boolean value — clicking still flips true/false.
Size	sm or md	sm	Appearance → Size	Checkbox control size.
Disabled	condition	—	Appearance → Disabled	Greys out and ignores clicks when the condition is true.
Visibility	condition	—	Appearance → Visibility	Shows or hides the block.

Event, Methods & State

Item	Type	Description
On Check Change	event	Fires when the user checks or unchecks the box. Payload: `value` (boolean).
`Set Value`	method	Sets the checked state to the given value.
`Toggle`	method	Flips the current checked state.
`{{ id.value }}`	boolean state	Current checked state.

Warning: Only exact true counts as checked. When the default value arrives as text, only the exact string "true" (case-sensitive, trimmed) checks the box. "True", "yes", "1" all resolve to unchecked.

Note: Indeterminate is visual only. Setting Indeterminate changes the appearance but not the underlying boolean. Clicking an indeterminate checkbox still just toggles true/false.

Checkbox Group Field (inside a Form)

A multi-pick checkbox group inside a Form block. The value is a set of the selected options' value strings. Each option can have its own visibility condition. Options can come from a static list or a data source.

Note: This is different from the standalone Checkbox block. The form Checkbox Group field renders a group of checkboxes — not a single one — and its value is an array or set of selected values that submits with the form.

Radio Button Block (Standalone)

A single, free-standing radio control with a label and optional description. Holds one boolean value — checked or unchecked. It is not a radio group: each Radio Button block is independent. Build mutual exclusivity yourself, or use the Form block's Radio Group field for a managed single-choice group.

When to Use

A single opt-in choice presented in radio styling — one option row in a custom chooser.
Build your own mutually exclusive group by dropping several Radio Buttons and unchecking siblings from each one's On Value Change event.
For a ready-made single-choice group with validation, use the Form block's Radio Group field.

Properties

Property	Type	Default	Description
Label	string (translatable)	"New Radio Button"	Text beside the radio control.
Description	string (translatable)	—	Secondary text under the label, indented.
Default value	string (bindable)	— (unchecked)	Initial checked state. Dynamic bindings silently reset on change without firing On Value Change.
Size	sm or md	sm	Control size.
Disabled	condition	—	Greys out and ignores clicks.
Visibility	condition	—	Shows or hides the block.
Styles	style set	—	Width/height, margin, padding, background, border.

Event, Methods & State

Item	Type	Description
On Value Change	event	Fires when the user clicks (checking or unchecking). The block's value is already updated when the actions run.
Set Value	method	Sets the checked state to a given value.
Toggle	method	Flips the current checked state.
`{{ id.value }}`	boolean state	Current checked state.

Warning: Clicking a checked radio unchecks it. Unlike native browser radio buttons, clicking again deselects. If your design requires "always one selected", enforce it in your event handlers.

Note: There is no built-in grouping. Each Radio Button block is independent. Build exclusivity by calling Set Value on siblings from each button's On Value Change, or use the Form block's Radio Group field which manages grouping automatically.

Radio Group Field (inside a Form)

A managed single-choice group of radio buttons inside a Form block. The value is the selected option's value string. Options can be static or from a data source, each with an optional visibility condition. Participates in form validation and the submit payload.

Use when one choice must be made from a small, always-visible set.
For longer lists or a collapsed picker, use the Single-select Dropdown field instead.

Toggle Block (Standalone)

An on/off switch with optional label, description, and help text. Its boolean value is exposed to the page for binding. It fires a single On Change event when flipped and can display a localized "On"/"Off" text label beside the switch. Available on web and native mobile apps.

When to Use

Flip a single setting on or off — notifications, dark mode, feature opt-ins — and react immediately via On Change.
Drive other blocks' visibility or a data source parameter from {{ id.value }}.
Inside a Form block, use the Form's Switch field instead.

Properties

Property	Type	Default	Description
Label	string (translatable)	—	Text shown beside the switch.
Description	string (translatable)	—	Secondary text under the label.
Help Text	string (translatable)	—	Additional guidance below the switch and description.
Default value	string (bindable)	— (off)	Initial on/off state. Dynamic bindings update on change.
Show toggle label	boolean	—	Shows "On"/"Off" text beside the switch (localized).
Size	xxs, xs, sm or md	sm	Switch control size.
Color	Brand, Success or Error	Brand	Switch color.
Disabled	condition	—	Disables the toggle.
Visibility	condition	—	Shows or hides the block.

Event, Methods & State

Item	Type	Description
On Change	event	Fires when the user flips the switch. Payload: `value` (boolean).
`Set Value`	method	Sets the toggle state programmatically. To flip it, call Set Value with the inverse of {{ id.value }}.
`{{ id.value }}`	boolean state	Current on/off state.

Comparison: Checkbox vs. Radio vs. Toggle

Aspect	Checkbox	Radio Button	Toggle
Visual style	Square checkbox	Round radio button	Sliding switch
Value	boolean	boolean (single)	boolean
Grouping	Single standalone	Single standalone (no built-in group)	Single standalone
Indeterminate state	Yes	No	No
Localized On/Off label	No	No	Yes
Event name	On Check Change	On Value Change	On Change
Form field equivalent	Checkbox field (single boolean) / Checkbox Group field (multi-pick)	Radio Group field	Switch field

Step-by-Step Examples

Filter Toggle on a Dashboard

Drop a Checkbox block above a table. Set Label to "Show archived".
In the table's data source, add a filter: showArchived = {{ checkbox1.value }}.
On On Check Change, refresh the table's data source.

"Select All" with Mixed State

Add a Checkbox block (checkbox1) at the top of a list.
Bind Indeterminate to an expression that is true when some rows are selected but not all, for example {{ selected.length > 0 && selected.length < items.length }}.
Bind Checked to an expression that is true when every row is selected, for example {{ items.length > 0 && selected.length === items.length }}. Replace selected and items with the bindings for your selected rows and your full list.
On On Check Change, run an action that selects or clears all rows based on {{ checkbox1.value }}.

Two-Option Exclusive Radio Choice

Drop two Radio Button blocks: "Pay by card" (radio1) and "Pay by invoice" (radio2).
On radio1's On Value Change, add a Trigger Component Method action on radio2 with the Set Value method and Checked = false. Give the action a run condition so it only runs when {{ radio1.value }} equals true.
Do the same on radio2: set radio1 to false only when {{ radio2.value }} equals true.
Downstream logic reads which block's {{ id.value }} is true.

Note: Clicking a checked radio unchecks it, so a user can still end up with neither option selected. If one must always be chosen, check that one of the values is true before you continue, or use the Form block's Radio Group field.

Dark Mode Toggle

Drop a Toggle block. Set Label to "Dark mode" and turn on Show toggle label.
On On Change, set a page variable isDarkMode to {{ toggle1.value }} (the toggle's own state, already updated when the event runs).
On the background block, open the color setting in Appearance and add a condition: when isDarkMode equals true, use your dark color; otherwise keep the light one.