Checkbox
A checkbox field that wraps <input type="checkbox"> and provides a boolean toggle with an optional text label to the right and configurable color. The field's checked state maps to its value, and the values returned when checked or unchecked are controlled via checkedValue and uncheckedValue. This field can be used as a cell editor in a Grid.
const checkbox = new Checkbox({
label : 'Agree to terms',
text : 'I accept',
checked : false,
appendTo : document.body
});
Color can be specified, and you can optionally configure text to display in a label to the right of the checkbox in addition to a standard field label:
Useful configs and properties
| Config | Description |
|---|---|
| checked | Initial checked state |
| text | Label text displayed to the right of the checkbox |
| color | Checkbox color (must have a matching CSS rule) |
| checkedValue | Value provided when checked |
| uncheckedValue | Value provided when unchecked |
| label | Field label displayed beside the checkbox |
Nested Items
A checkbox can also have a container of additional items. These items can be displayed immediately following the field's label (which is the default when there is only one item) or below the checkbox. This can be controlled using the inline config.
In the demo below notice how additional fields are displayed when the checkboxes are checked:
See also
- SlideToggle - Toggle switch variation of Checkbox
- CheckboxGroup - Group widget for multiple-selection checkboxes
- Radio - Radio button for single-selection groups
Configs
Configs are options you supply in a configuration object when creating an instance of this classProperties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of Checkbox class, or subclass thereof.
Functions
Functions are methods available for calling on the class-
check( )
Check the box
-
internalOnChange( )private
Triggers events when user toggles the checkbox
Triggers: beforeChange, change, action
-
toggle( )
Toggle checked state. If you want to force a certain state, assign to checked instead.
-
triggerChange( )private
Triggers events when checked state is changed
Triggers: beforeChange, change, action
-
uncheck( )
Uncheck the box