CheckboxGroup
The CheckboxGroup widget contains a set of related Checkbox widgets.
For example, to present three choices and have the user select one or more of them:
const checkboxGroup = new CheckboxGroup({
appendTo : document.body,
title : 'Select cities',
name : 'cities',
value : 'London', // the default choice
options : {
London : 'London',
Madrid : 'Madrid',
Stockholm : 'Stockholm',
Sydney : 'Sydney'
}
});
//<code-header>
fiddle.title = 'Checkbox group';
//</code-header>
const checkboxGroup = new CheckboxGroup({
appendTo : targetElement,
title : 'Select cities',
name : 'cities',
value : ['London', 'Sydney'], // the default selection
options : {
London : 'London',
Madrid : 'Madrid',
Stockholm : 'Stockholm',
Sydney : 'Sydney',
Miami : 'Miami'
},
onChange() {
targetElement.lastElementChild.innerText = `Selected: ${this.value.join(', ')}`;
}
});
const label = document.createElement('span');
targetElement.appendChild(label);
checkboxGroup.onChange();The name config is required for this widget, and it will be assigned to all checkboxes created by processing the options config.
Vertical or horizontal layout
The default orientation is vertical, but you can change it to horizontal by setting the inline
config to true.
//<code-header>
fiddle.title = 'Horizontal checkbox group';
//</code-header>
const checkboxGroup = new CheckboxGroup({
appendTo : targetElement,
title : 'Select cities',
inline : true, // Horizontal layout
name : 'cities',
value : 'London', // the default choice
options : {
London : 'London',
Madrid : 'Madrid',
Stockholm : 'Stockholm',
Sydney : 'Sydney'
}
});Disabled
//<code-header>
fiddle.title = 'Disabled checkbox group';
//</code-header>
const checkboxGroup = new CheckboxGroup({
appendTo : targetElement,
title : 'Select cities',
name : 'cities',
disabled : true,
value : 'London', // the default choice
options : {
London : 'London',
Madrid : 'Madrid',
Stockholm : 'Stockholm',
Sydney : 'Sydney'
}
});Validation
You can set requiredSelectedOptions, minSelectedOptions and maxSelectedOptions to force users to select the right amount of options.
//<code-header>
fiddle.title = 'Checkbox group validation';
//</code-header>
const checkboxGroup = new CheckboxGroup({
appendTo : targetElement,
title : 'Life wishlist (select up to 3)',
name : 'cities',
value : ['A', 'B', 'C'], // the default selection
minSelectedOptions : 1,
maxSelectedOptions : 3,
options : {
A : 'Fame',
B : 'Money',
C : 'Friends',
D : 'Long life',
E : 'No typescript errors'
}
});Configs
119
Configs
119Common
Other
The maximum number of options to select
The minimum number of options to select
The set of options for this checkbox group. The keys of this object hold the checkbox's checkedValue while the object values are a string for the checkbox's text or a config object for that checkbox.
The value of this checkbox group will be one of the keys in this object or null
if no checkbox is checked.
Example:
{
type : 'checkboxgroup',
name : 'resolution',
value : 'A',
title : 'Allergies',
options : {
A : 'Gluten',
B : 'Bacon',
C : 'Lactose',
D : 'Fish'
}
}
The number of options the user is required to select for this field to be valid. See also minSelectedOptions and maxSelectedOptions if you would like to use a range.
This property corresponds to the checkedValue of all the currently checked checkboxes.
Accepts a comma-separated string representing the checked values.
Content
CSS
DOM
Float & align
Layout
misc
Misc
Scrolling
Properties
103
Properties
103Class hierarchy
Other
The maximum number of options to select
The minimum number of options to select
The number of options the user is required to select for this field to be valid. See also minSelectedOptions and maxSelectedOptions if you would like to use a range.
This property corresponds to the checkedValue of all the currently checked checkboxes.
Accepts a comma-separated string representing the checked values.
CSS
DOM
Layout
Misc
State
Widget hierarchy
Functions
74
Functions
74Configuration
Events
Misc
Other
Widget hierarchy
Events
23
Events
23Fired before one of the checkboxes is toggled, return false to prevent the action.
// Adding a listener using the "on" method
checkboxGroup.on('beforeChange', ({ value, source }) => {
});| Parameter | Type | Description |
|---|---|---|
value | String[] | This widget's value |
source | CheckboxGroup | This widget |
Fired when one of the checkboxes is toggled.
// Adding a listener using the "on" method
checkboxGroup.on('change', ({ value, source }) => {
});| Parameter | Type | Description |
|---|---|---|
value | String[] | This widget's value |
source | CheckboxGroup | This widget |
Event handlers
23
Event handlers
23Called before one of the checkboxes is toggled, return false to prevent the action.
new CheckboxGroup({
onBeforeChange({ value, source }) {
}
});| Parameter | Type | Description |
|---|---|---|
value | String[] | This widget's value |
source | CheckboxGroup | This widget |
Called when one of the checkboxes is toggled.
new CheckboxGroup({
onChange({ value, source }) {
}
});| Parameter | Type | Description |
|---|---|---|
value | String[] | This widget's value |
source | CheckboxGroup | This widget |