Boolean Input

Tips & examples

An interactive input that can render as a checkbox, a switch, or a button with custom text labels, colors, and layout placements.

When to use

User needs to toggle a binary value (true/false) or select a tri-state value (true/false/null) inside a form.
Providing toggle switches, checkbox inputs, or toggle button behaviors for boolean form parameters.

What you need

Requires a parent Form context (default_form) on the page to resolve the Data Source connection (Element ID and Field Path).

Form-bound boolean data. The element reads/writes directly to schema fields of boolean type.

Examples

An ‘Accept Terms and Conditions’ mandatory checkbox.
An ‘Enable Notifications’ toggled switch in a user settings form.
A tri-state database flag allowing true, false, or explicitly null (unset) values.

Avoid

Using for read-only status displays where users should not interactively toggle the state, use boolean_field instead.
Attempting to configure form Data Source bindings (Element ID and Field Path) before placing a parent default_form element on the page canvas layout.

Use instead

Boolean Field — The value is read-only output and doesn’t need to be modified by the user.

Pairs well with

Form — Provides the underlying form context, validation errors, and mutation handlers.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Data Source

Binds the checkbox/switch/button value to a boolean field on the parent form's data source.

Data SourceoptionalSettings group: Where this element loads its data (view, query, connector, or element).
Default: none

Input

Disabled/nullable toggles (expression-capable) plus the default checked state used when there is no data source.

DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Example true
Default: none
NullableoptionalYes / no or Custom expression (yes/no): Whether the field may be left empty.
Example true
Default: none
Default ValueoptionalNot set (null): Initial input state before user interaction. Values can be true, false, or null.
Default: none

Styling

Label placement, whether to render as switch/checkbox/toggle button, full-width layout for the button variant, and color.

PlacementoptionalOne of: end, start, top, bottom

Label position relative to the input control.

Choices

end — Input renders to the right of the label text.
start — Input renders to the left of the label text.
top — Input renders above the label text.
bottom — Input renders below the label text.

Default: none

Is SwitchoptionalYes / no

Transforms the default checkbox visual design into a dynamic toggle switch.

Default: none

Is ButtonoptionalYes / no

Transforms the checkbox design into a clickable selection button.

Default: none

Full WidthoptionalYes / no

Configuration for full Width.

Default: none

ColoroptionalOne of: primary, secondary, success, error, warning, info, standard, default (or not set)

Select theme colors (Default, Primary, Secondary) or switch to expression mode to pass custom string rules.

Choices

primary
secondary
success
error
warning
info
standard
default

Example primary

Default: none

Inside dataSource: (dataSource)

Element IDrequiredNumber or Text: Another element on the page whose data backs this field.
Default: none
Field PathrequiredList of Text or Number: Path into the source element’s data (property segments).
Default: none

Sizing

No size of its own: dropped at the platform default of 1 × 1 grid cells and resized on the page.

Translatable labels

label — Visual text label identifying the action of the checkbox or switch.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.agreed.<property>

value boolean Current input value of this control. elements.agreed.value

When The live checkbox state in the form, before saving. The usual way to reveal follow-up fields: point a Conditional Container's condition at it.

disabled boolean True while the control is locked and cannot be edited. elements.agreed.disabled

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.agreed.value

Replace agreed with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "defaultValue": false,
    "disabled": false,
    "nullable": false,
    "placement": "end",
    "isSwitch": false,
    "isButton": false,
    "color": "primary",
    "fullWidth": false
  }
}

Ready-made setups

Form-bound Switch with Label ↕

An interactive switch toggle placed inside a form and bound to a boolean schema path.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{
  "config": {
    "dataSource": {
      "elementId": "<parentFormId>",
      "fieldPath": [
        "isActive"
      ]
    },
    "styling": {
      "placement": "start",
      "displayAsSwitch": true,
      "color": "primary"
    }
  }
}

Notes

Description

The DefaultBoolInput is used to reflect a boolean value.

config

property	type	description	required
`placement`	`string`	The label placement.
`isSwitch`	`string`	Show Switch or Checkbox

i18n

name	description	required
label	Text displayed at the placement config.

When to use

What you need

Examples

Avoid

Related elements

Editor properties

Sizing

Translatable labels

Values you can read in expressions

Where you can place it

Ready-made setups

Notes

Description

config

i18n