CheckboxGroup
A container for a set of related Checkbox widgets, allowing the user to select multiple options from the group. Provide the choices via the convenient options shorthand or as individual Checkbox child items. The group's value reflects the array of checked checkbox values and can be read from a parent container's values. Enforce selection limits with requiredSelectedOptions, minSelectedOptions, and maxSelectedOptions.
const checkboxGroup = new CheckboxGroup({
appendTo : document.body,
title : 'Select cities',
name : 'cities',
value : 'London',
options : {
London : 'London',
Madrid : 'Madrid',
Stockholm : 'Stockholm',
Sydney : 'Sydney'
}
});
Useful configs and properties
| Config / Property | Description |
|---|---|
| options | Object mapping values to display labels |
| name | Name used when reading/writing container values |
| inline | Display checkboxes horizontally instead of vertically |
| value | Array of checked checkbox values |
| requiredSelectedOptions | Minimum required selections for validation |
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.
Disabled
Validation
You can set requiredSelectedOptions, minSelectedOptions and maxSelectedOptions to force users to select the right amount of options.
See also
- Checkbox - Individual checkbox widget
- RadioGroup - Similar group widget for single-selection radio buttons
- FieldSet - Base fieldset container
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
The maximum number of options to select
Has a corresponding runtime maxSelectedOptions property.
-
The minimum number of options to select
Has a corresponding runtime minSelectedOptions property.
-
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.
Has a corresponding runtime requiredSelectedOptions property.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of CheckboxGroup class, or subclass thereof.
-
The maximum number of options to select
Has a corresponding maxSelectedOptions config.
-
The minimum number of options to select
Has a corresponding minSelectedOptions config.
-
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.
Has a corresponding requiredSelectedOptions config.
-
Identifies an object as an instance of CheckboxGroup class, or subclass thereof.