Radio Group

RadioGroup

The RadioGroup widget renders a group of radios together in a few pre-determined layouts.

Test in Kitchen Sink (opens in a new tab)

Properties

PropertyTypeDescription
itemsstring[]A list of values for the radio buttons. These will be used for both labels and values. Either this or itemTemplate is required.
itemTemplateItem TemplateTemplate for each radio button, allowing custom labels, widgets, values, and iteration over data
selectedValuestringThe value of the selected radio button
onChangeActionCall Ensemble's built-in functions or execute code when the selection changes

This widget also inherit the following Form Field properties:

PropertyTypeDescription
labelstringLabel for your widget
labelHintstringHint text on your label
requiredbooleanWhether the field is required
enabledbooleanWhether the field is enabled
iconIconInclude an icon on this form field

Item Template

Used to iterate through a data set and render the label/value for each Radio.

PropertyTypeDescription
datastringBind to an array of data from an API response or a variable
namestringSet the name to reference as you iterate through the array of data
valueanyThe value for each radio. This should be unique within the same RadioGroup
labelstringThe label for each radio button. Either this or labelWidget is required.
labelWidgetWidgetA widget to use as the label for each radio button. Either this or label is required

Styles

PropertyTypeDescription
directionstringHow the Radios should be laid out: vertical, horizontal, or wrap
controlPositionstringPosition of the radio button relative to the label: leading, trailing, or depending on the platform
gapintegerGap between radio buttons (applicable for vertical/horizontal direction)
lineGapintegerGap between lines if wrapped (applicable for wrap direction)
itemGapintegerGap between radio button and its label
activeColorColorColor when a radio button is selected
inactiveColorColorColor when a radio button is not selected

This widget also inherits these base styles:

PropertyTypeDescription
visiblebooleanToggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified.
visibilityTransitionDurationnumberSpecify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible.
elevationintegerThe z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. (Minimum: 0, Maximum: 24)
elevationShadowColorColorThe shadow color for the elevation.
elevationBorderRadiusinteger / stringIf the widget has a borderRadius, this should be changed to have the same value. Use with CSS-like notation (1 to 4 integers).
alignmentAlignmentAlign this widget relative to its parent.
stackPositionTopintegerThe distance of the child's top edge from the top of the stack. This is applicable only for Stack's children.
stackPositionBottomintegerThe distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children.
stackPositionLeftintegerThe distance that the child's left edge from the left of the stack. This is applicable only for Stack's children.
stackPositionRightintegerThe distance that the child's right edge from the right of the stack. This is applicable only for Stack's children.
captureWebPointerbooleanApplicable for Web only. When overlaying widgets on top of certain HTML container (e.g., Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget.