Radio Input

Tips & examples

A single-select option group outputting a string, rendered as a list of circular radio indicators or interactive toggle buttons aligned vertically or horizontally.

When to use

Allowing users to select exactly one option from a small, clear set of mutually exclusive choices.
Presenting discrete categorical choices visually using classic radio indicators or segment toggle buttons.

What you need

Deactivated by default until a default_form is present on the page layout. Requires a valid Data Source connection (Element ID and Field Path) to store the selected option string.

Form-bound text fields or dynamic string variables representing discrete categorical values.
Data Source section attributes remain locked until a default_form is actively placed in the workspace hierarchy.

Examples

A form field allowing users to choose a shipping speed (Standard, Express, Overnight) configured via static options.
A dynamic status selector pulling available workflow states directly from a backend database query.

Avoid

Using for multi-selection scenarios, use a checkbox group component instead.
Displaying a massive list of options (e.g., over 10 items), use a dropdown/select component instead to preserve vertical layout space.
Attempting to configure form data bindings before placing a parent default_form element on the page canvas.

Use instead

Form — Required as a parent container when saving selected option values to backend datasets.

Pairs well with

Form — Provides the underlying form context, validation handling, and payload submission engine.

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

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

Options Source

Column NamerequiredTextInside `reference`: Selects the referenced source column used to populate dynamic options.
Default: none
Column LabelrequiredTextInside `reference`: Selects the referenced source label column shown next to each option.
Default: none
View NamerequiredTextInside `reference`: Database view that supplies rows or form data.
Default: none
Optionsrequiredundefined: Static label/value options rendered when the input is not using a reference source.
Default: []

Input

DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Example false
Default: none
NullableoptionalYes / no or Custom expression (yes/no): Whether the field may be left empty.
Example false
Default: none

Styles

VariantoptionalOne of: radio, toggleButton

Chooses between classic radio and toggle button rendering.

Choices

radio
toggleButton

Default: none

OrientationoptionalOne of: horizontal, vertical

Controls the structural alignment direction of option items.

Choices

horizontal
vertical

Default: none

Label PlacementoptionalOne of: end, start, top, bottom

Controls where the label appears relative to the control.

Choices

end
start
top
bottom

Default: none

ColoroptionalOne of: default, error, success, warning, info, primary, secondary

Sets the selection indicator accent color.

Choices

default
error
success
warning
info
primary
secondary

Default: none

SizeoptionalOne of: small, medium, large

Sets the visual sizing scale of the radio controls or toggle buttons.

Choices

small
medium
large

Default: none

Sizing

Default size when dropped on a page: 1 × 1.

Translatable labels

label — The title string displayed directly above the option set.

Accessibility

Renders as a semantic radiogroup role structure. ARIA attributes communicate selected state and group title to assistive technologies.

Tab focuses the selected radio button within the group.
Arrow keys navigate and move selection across available radio options.

Expressions

Values you can read in expressions

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

elements.myRadioInput.<property>

value Varies by configuration The current value. elements.myRadioInput.value

When The stored key of the chosen option. Point a Conditional Container at it to reveal follow-up fields for one choice only.

value full type ↕

string | number | boolean | null

options Array<object> The available options. elements.myRadioInput.options

loadingOptions boolean True while the selectable options are being loaded. elements.myRadioInput.loadingOptions

optionsError string Error message if the selectable options could not be loaded. elements.myRadioInput.optionsError

errors any Field-level validation errors after submit or blur. elements.myRadioInput.errors

touched boolean Map of fields the user has interacted with. elements.myRadioInput.touched

valueObject object The full selected option record, not just its stored value. elements.myRadioInput.valueObject

When The whole record behind the chosen option, when the options come from a view and you need a second column from the same row.

rawOptions any The option records exactly as returned by the data source. elements.myRadioInput.rawOptions

rawValueObject null The current raw value object value of this element. elements.myRadioInput.rawValueObject

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

color string Resolved display colour after any colour expression runs. elements.myRadioInput.color

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.myRadioInput.value

Replace myRadioInput 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:

Placement notes

Form — Can be nested directly inside or placed alongside form layouts. When a form is linked as a data source, it transitions behavior from local state management to form-bound schema state tracking.

Sample configuration

Minimal example — required fields only ↕

1
2
3
4
5
6
7
8
9
{
  "config": {
    "reference": {
      "columnName": "columnName",
      "columnLabel": "columnLabel",
      "viewName": "contacts"
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "disabled": false,
    "nullable": false,
    "reference": {
      "columnName": "columnName",
      "columnLabel": "columnLabel",
      "viewName": "contacts"
    },
    "variant": "radio",
    "orientation": "horizontal",
    "labelPlacement": "end",
    "color": "default",
    "size": "small"
  }
}

Ready-made setups

Horizontal Payment Selection Radio Group ↕

Configures a form-bound horizontal radio group with static option choices using primary branding accents.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
  "config": {
    "dataSource": {
      "elementId": "checkoutForm",
      "fieldPath": [
        "paymentMethod"
      ]
    },
    "options_source": {
      "optionsSourceType": "Static options",
      "staticOptions": [
        {
          "label": "Credit Card",
          "value": "credit_card"
        },
        {
          "label": "PayPal",
          "value": "paypal"
        },
        {
          "label": "Bank Transfer",
          "value": "bank_transfer"
        }
      ]
    },
    "styles": {
      "displayStyle": "Radio",
      "radioColorExpression": "primary",
      "size": "medium",
      "orientation": "horizontal"
    },
    "input": {
      "disabled": "@@expression: false",
      "nullable": false
    }
  }
}

When to use

What you need

Examples

Avoid

Related elements

Editor properties

Sizing

Translatable labels

Accessibility

Values you can read in expressions

Where you can place it

Placement notes

Ready-made setups