CheckboxRadio template
Use the CheckboxRadio template to display categorical questions or grids with a button style.
The template can display rating buttons with headings. The headings are defined in the category label: for example, “10{Good}” shows the heading “Good” above the 10 rating button.
When used with a grid, use the height and width properties to control whether the entire grid cell is a button, or if a button is displayed within the cell. If the height and width are both 100%, then the entire grid cell is the button.
Associated uxui_template_props
highlightSelectedCategories
Specify whether the selected categories are highlighted (true or false).
The default value is true.
showGridTitle
Show or hide the grid title row and column.
border
Specify the border size, style and color by using CSS syntax. For example:
'1px solid #ababab'
borderRadius
Specify the border radius to change the shape of the control by using CSS syntax. For example, borderRadius: '15px 50px' specifies different radii on the top-left and bottom-right corners, and on the top-right and bottom-left corners.
margin
Margin is the space around an element. To specify the margin, use CSS syntax, for example: '2px 5px 4px 3px'.
The default margin is '0px 5px 1px 0px'.
padding
Padding is the space between the element and the related content, in this case, the checkbox or radio element. To specify the padding, use CSS syntax, for example: '2px 5px 4px 3px'.
The default padding is '3px 5px'.
showControl
Defines whether to show the categorical control (checkbox or radio button).
The default value is false.
labelAlign
Align labels to the center, left, or right.
The default value is center.
orientation
Display the buttons as columns or rows by specifying row or column.
The default value is column.
height
Set the height of the button.
width
Set the width of the button.
Applies to
Categorical questions or grids with categorical questions
Example
The following example creates a rating style question with descriptive labels:
CatQ2 "Display the categories with rating labels."
[
uxui_template_name = "CheckboxRadio",
uxui_template_props = "{ orientation: 'row', width: '3em' } "
]
categorical [1..1]
{
_0 "0{Bad}",
_1 "1",
_2 "2",
_3 "3",
_4 "4",
_5 "5{Normal}",
_6 "6",
_7 "7",
_8 "8",
_9 "9",
_10 "10{Good}"
};
The following example creates button categories with controls and left label alignment:
CatQ3 "Display the categories with the checkbox/radio icon and left aligned"
[
uxui_template_name = "CheckboxRadio",
uxui_template_props = "{ showControl: true, labelAlign: 'left' }"
]
categorical [1..1]
{
use Airports -
};
See