Radio-button widget
The radio-button widget enables the user to select one option from a list. Each radio button normally has a label describing the choice that the radio button represents.
A radio button represents two states:
-
Selected: Blue circle outline containing filled blue circle.
-
Cleared: Blue circle outline.
Example
Properties
Property |
Description |
Data type |
---|---|---|
|
ARIA label, which provides additional information about the element's purpose and functionality to assistive technologies, such as screen readers. If this is not provided, assistive technologies use |
string |
|
Button layout, which is either values are |
enum |
|
JSON containing the properties that define the visual appearance of the item, as described in Context properties. |
string (JSON) |
|
Name of event that fires when a user selects a radio-button option. |
string |
|
Tooltip displayed below the input. |
string |
|
Unique identifier of this widget. |
string |
|
Optional label text displayed a for radio-button control. |
string |
|
When radio buttons are vertically aligned (
|
enum |
|
Array of text specifying the options of this radio group. |
string |
|
Default radio option selection. If empty, defaults to |
integer |
|
Indicates whether the engine sets focus to this widget. Default is If set to |
Boolean |
type
|
Rich-media type, which is always RadioButton . |
string |
|
Array of text that is the actual value of each radio button option. If empty, text from the |
text |
Context properties
These are the context
properties.
Context property |
Description |
Data type |
---|---|---|
|
Label color, as a hex color code. |
string (hex color code) |
|
Label alignment, which is one of: |
enum |
|
Label size, in pixels. |
integer |
|
Label style, which is one of: |
enum |
controlContext properties
These are the controlContext
properties.
controlContext property |
Description |
Data type |
---|---|---|
|
Radio button plus left margin, in pixels. |
integer |
Widget-specific expression evaluations
Property |
Description |
Data type |
---|---|---|
|
Example: |
integer |
|
Example: |
string |
Code sample
var obj = {
"widgetType": "form",
"nodes":
[{
"id": "widget1",
"controls": {
"0": {
"type": "RadioButton",
"options": ["satisfactory", "excellent"],
"values": ["one", "two"],
"id": "radio1",
"name": "gener",
"selectedIndex": 1,
"label": "please select from the below",
"visible": {
"trigger": "eventchecked",
"guard": "(#view1.check1.item.0.isChecked==true)"
}
},
"1": {
"type": "RadioButton",
"options": ["satisfactory", "excellent"],
"values": ["one", "two"],
"id": "radio1",
"name": "gener",
"layout": "inline",
"selectedIndex": 1,
"label": "please select from the below"
},
"2": {
"type": "RadioButton",
"options": ["1", "2"],
"values": ["one", "two"],
"id": "radio1",
"name": "gener",
"layout": "inlineGrow",
"buttonLayout": "vertical",
"selectedIndex": 1,
"label": "please select from the below"
}
}
}
]
}