Checkboxes, Radio & Toggle

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.

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

Event, Methods & 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 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 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 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 field.

Properties

Event, Methods & 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 setValue on siblings from each button's On Value Change, or use the Form block's Radio field which manages grouping automatically.

Radio 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

Event, Methods & State

Comparison: Checkbox vs. Radio vs. Toggle

Frequently Asked Questions

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 call setValue(false) on all the other checkboxes. For a proper single-select group, use a Radio Button form field inside a Form, or use a Single-select Dropdown, which was designed for this pattern.

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 isIndeterminate = 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 form 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.

Step-by-Step Examples

Filter Toggle on a Dashboard

1. Drop a Checkbox block above a table. Set Label to "Show archived".

2. In the table's data source, add a filter: showArchived = {{ checkbox1.value }}.

3. On On Check Change, refresh the table's data source.

"Select All" with Mixed State

1. Add a Checkbox block at the top of a list.

2. Bind Indeterminate to a condition: some rows selected but not all.

3. Bind Checked to: all rows are selected.

4. On On Check Change, run an action that selects or clears all rows based on {{ event.value }}.

Two-Option Exclusive Radio Choice

1. Drop two Radio Button blocks: "Pay by card" and "Pay by invoice".

2. On the first button's On Value Change, call radio2.setValue with Checked = false.

3. On the second button's On Value Change, call radio1.setValue with Checked = false.

4. Downstream logic reads which block's {{ id.value }} is true.

Dark Mode Toggle

1. Drop a Toggle block. Set Label to "Dark mode" and enable Show toggle label.

2. On On Change, set a page variable isDarkMode to {{ event.value }}.

3. Bind your theme or background color to {{ isDarkMode }}.