Select widget

The select widget enables selection from a list of items.

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

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 an option.

string

header

Default selection in the dropdown list before the user's selection, for example: "Choose your state."

string

helpText

Tooltip displayed below the input.

string

id

Unique identifier of this widget.

string

items

Array of text specifying the selection options.

string

label

Optional label text that gets displayed for check box control.

string

selectedIndex

Default item. 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 the first item when the rich-media widget is presented to the user. This is useful for accessibility and usability, if the user must select an item.

Boolean

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

values

Array of text that is the actual value of each select item. If empty, text from the items array is used.

string

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

borderColor

Select border color, as a hex color code.

string (hex color code)

borderRadius

Select border radius, in pixels.

integer

borderWidth

Select border width, in pixels.

integer

marginLeft

Select left margin, in pixels.

integer

marginRight

Select right margin, in pixels.

integer

Validation properties

Property

Description

Data type

required

Indicates whether user selection is required.

Boolean

Widget-specific expression evaluations

Property

Description

Data type

selectedIndex

Example: #widget1.select1.selectedIndex

integer

selectedText

Example: #widget1.select1.selectedText

string

Code sample

var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Select",
                    "items": ["satisfactory", "excellent"],
                    "header": "Choose",
                    "label": "please select from the below",
                    "id": "select1",
                    "validation": {
                        "required": {
                            "error": "you must select something"
                        }
                    }
                }
            }
        }
    ]
}