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

ariaLabel

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 helpText instead.

string

buttonLayout

Button layout, which is either values are vertical or default. This property is relevant only when the value of the layout property is either inline or inlineGrow.

enum

context

JSONClosed containing the properties that define the visual appearance of the item, as described in Context properties.

string (JSON)

event

Name of event that fires when a user selects a radio-button option.

string

helpText

Tooltip displayed below the input.

string

id

Unique identifier of this widget.

string

label

Optional label text displayed a for radio-button control.

string

layout

When radio buttons are vertically aligned (buttonLayout property is vertical), then this property specifies the layout, which is either: inline | inlineGrow. Otherwise, the system ignores this property.

  • inline: Default value. Button width is the minimum that fits the label.

  • inlineGrow: Button width fills the entire row.

enum

options

Array of text specifying the options of this radio group.

string

selectedIndex

Default radio option selection. If empty, defaults to 0.

integer

setFocus

Indicates whether the engine sets focus to this widget. Default is false.

If set to true, the engine sets focus to the first radio button when the rich-media widget is presented to the user. This is useful for accessibility and usability, if the user must select a radio button.

Boolean

type Rich-media type, which is always RadioButton. string

values

Array of text that is the actual value of each radio button option. If empty, text from the options array is used.

text

Context properties

These are the context properties.

Context property

Description

Data type

text

Label color, as a hex color code.

string (hex color code)

textAlign

Label alignment, which is one of: left | center | right.

enum

textSize

Label size, in pixels.

integer

textStyle

Label style, which is one of: normal | italic | bold.

enum

controlContext properties

These are the controlContext properties.

controlContext property

Description

Data type

marginLeft

Radio button plus left margin, in pixels.

integer

Widget-specific expression evaluations

Property

Description

Data type

selectedIndex

Example: #widget1.radio1.selectedIndex

integer

selectedText

Example: #widget1.radio1.selectedText

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"
                }
            }
        }
    ]
}