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
| Property | Type | Description |
|---|---|---|
| items | string[] | A list of values for the radio buttons. These will be used for both labels and values. Either this or itemTemplate is required. |
| itemTemplate | Item Template | Template for each radio button, allowing custom labels, widgets, values, and iteration over data |
| selectedValue | string | The value of the selected radio button |
| onChange | Action | Call Ensemble's built-in functions or execute code when the selection changes |
This widget also inherit the following Form Field properties:
| Property | Type | Description |
|---|---|---|
| label | string | Label for your widget |
| labelHint | string | Hint text on your label |
| required | boolean | Whether the field is required |
| enabled | boolean | Whether the field is enabled |
| icon | Icon | Include an icon on this form field |
Item Template
Used to iterate through a data set and render the label/value for each Radio.
| Property | Type | Description |
|---|---|---|
| data | string | Bind to an array of data from an API response or a variable |
| name | string | Set the name to reference as you iterate through the array of data |
| value | any | The value for each radio. This should be unique within the same RadioGroup |
| label | string | The label for each radio button. Either this or labelWidget is required. |
| labelWidget | Widget | A widget to use as the label for each radio button. Either this or label is required |
Styles
| Property | Type | Description |
|---|---|---|
| direction | string | How the Radios should be laid out: vertical, horizontal, or wrap |
| controlPosition | string | Position of the radio button relative to the label: leading, trailing, or depending on the platform |
| gap | integer | Gap between radio buttons (applicable for vertical/horizontal direction) |
| lineGap | integer | Gap between lines if wrapped (applicable for wrap direction) |
| itemGap | integer | Gap between radio button and its label |
| activeColor | Color | Color when a radio button is selected |
| inactiveColor | Color | Color when a radio button is not selected |
This widget also inherits these base styles:
| Property | Type | Description |
|---|---|---|
| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. |
| visibilityTransitionDuration | number | Specify 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. |
| elevation | integer | The 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) |
| elevationShadowColor | Color | The shadow color for the elevation. |
| elevationBorderRadius | integer / string | If the widget has a borderRadius, this should be changed to have the same value. Use with CSS-like notation (1 to 4 integers). |
| alignment | Alignment | Align this widget relative to its parent. |
| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. |
| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. |
| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. |
| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. |
| captureWebPointer | boolean | Applicable 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. |