Data-Driven Radio Group

   MaestroThe UI design product.  |   Form Builder |  All versions This feature is related to all versions.

Maestro comes with the Data-Driven Radio Group component.

Usage

  1. Open the Palette pane in the Maestro Editor.
  2. Locate the Data-Driven Radio Group component within the Input Fields folder.
  3. Drag the component into the View pane or the Wireframe.
  4. Configure the component's properties via the Properties pane.

Properties

The following properties are available to the Data-Driven Radio Group component:

Data Source
Field Ref
dataPath

Path to source data

Label Field
Text
labelField

Path from data to label

Value Field
Text
valueField

Path from data to value

Selected Icon Class
Icon
selectedIconClass

Selected icon class name.

Unselected Icon Class
Icon
unselectedIconClass

Unselected icon class name.

Appearance

Arrangement
Option
arrangement

Defines the layout arrangement of the radio options on the page.

The following options are available from the Arrangement dropdown:

Label Value
Vertical (1 per line) vertical
Horizontal (natural width) horizontal
2 Column Grid 6
3 Column Grid 4
4 Column Grid 3
6 Column Grid 2
Min Width (px)
Integer
minWidth

Radio Button Minimum Width in Pixels.

Stack Threshold
Option
stackThreshold

Select which responsive threshold the radio options will stack on top of each other, or 'None' where stacking is not desired.

The following options are available from the Stack Threshold dropdown:

Label Value
Small sm
Medium md
Large lg
None none

Help Text

Popover Help Text
Help Text
helpText

Next, learn about the Topics component.