Check-box widget
The check-box widget enables the user to select one or more options. A check box is a square button with two states:
-
Selected: Solid blue square with white check mark.
-
Cleared: Square outlined in blue.
Changes in the state of one check box do not usually affect other check box instances.
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 |
|
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 the check box, in the format: |
string (JSON) |
|
Tooltip displayed below the input. |
string |
|
Unique identifier of this widget. |
string |
|
Array of text labels for check boxes. |
string (JSON) |
|
Optional label text displayed for the check box. |
string |
|
Indicates whether the engine sets focus to this widget. Default is If set to |
Boolean |
type
|
Rich-media type, which is always CheckBox . |
string |
|
Array of text to use as the value of each check box item. If not found, text from the |
string |
Validation properties
Property |
Description |
Data type |
---|---|---|
|
Indicates whether a user selection is required. |
Boolean |
Context properties
These are the context
properties.
Context property |
Description |
Data type |
---|---|---|
|
Label color. |
string |
|
Label alignment, which is one of: |
enum |
|
Label size, in pixels. |
integer |
|
Label style, which is one of: |
enum |
controlContext properties
controlContext property |
Description |
Data type |
---|---|---|
|
Set text area left margins, in pixels. |
integer |
Widget-specific expression evaluations
Property |
Description |
Example |
Data type |
---|---|---|---|
|
Indicates whether a particular index is selected. |
|
Boolean |
|
Returns a concatenated string of the items text for all selected check boxes. |
|
string |
Code sample
var obj = {
"widgetType": "form",
"nodes":
[{
"id": "widget1",
"controls": {
"0": {
"type": "CheckBox",
"items": ["satisfactory", "excellent"],
"id": "check1",
"label": "please select from the below",
"values": ["one", "two"],
"checked": [, true],
"event": {
"name": "eventchecked"
},
"enabled": {
"trigger": "eventinputchange",
"guard": "(!(isEmpty(#view1.input1.text)))"
},
"validation": {
"required": {
"value": true,
"error": "should be checked"
}
}
}
}
}
]
}