Checkbox
Checkbox field, wraps <input type="checkbox">.
//<code-header>
fiddle.title = 'Checkbox';
//</code-header>
new Checkbox({
appendTo : targetElement,
text : 'Unchecked'
});
new Checkbox({
appendTo : targetElement,
checked : true,
text : 'Checked'
});
new Checkbox({
appendTo : targetElement,
disabled : true,
text : 'Disabled & checked',
checked : true
});
new Checkbox({
appendTo : targetElement,
disabled : true,
text : 'Disabled'
});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:
//<code-header>
fiddle.title = 'Checkbox text label';
//</code-header>
new Checkbox({
appendTo : targetElement,
text : 'With text'
});
new Checkbox({
appendTo : targetElement,
label : 'With label'
});This field can be used as an editor for the Column.
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:
//<code-header>
fiddle.title = 'Checkbox items';
//</code-header>
new Checkbox({
appendTo : targetElement,
text : 'Single item',
autoCollapse : true,
checked : true,
container : [{
type : 'textfield',
placeholder : 'Additional info...',
flex : 1
}]
});
new Checkbox({
appendTo : targetElement,
text : 'Two items',
autoCollapse : true,
inline : true, // can also use false to wrap a single item
container : {
from : {
type : 'textfield',
placeholder : 'From...',
flex : 1
},
to : {
type : 'textfield',
placeholder : 'To...',
flex : 1,
style : 'margin-inline-start: 1em'
}
}
});
new Checkbox({
appendTo : targetElement,
text : 'Child form',
autoCollapse : true,
checked : true,
container : {
from : {
labelPosition : 'above',
type : 'textfield',
label : 'From',
width : 'auto'
},
to : {
labelPosition : 'above',
type : 'textfield',
label : 'To',
width : 'auto'
}
}
});Configs
112
Configs
112Common
Other
Specify true to automatically collapse the field's
container when the field is not checked.
Alternatively, this can be a function that returns the desired collapse state when passed the field
instance as its one parameter.
The checked state. The same as value.
Checkbox color, must have match in CSS
Text to display on checkbox label
The value of the checkbox. This is the same as checked.
DOM
Float & align
Input element
Label
Layout
Misc
Scrolling
Properties
84
Properties
84Class hierarchy
Other
The checked state. The same as value.
Get/set label
The value of the checkbox. This is the same as checked.
CSS
DOM
Layout
Misc
Functions
67
Functions
67Other
Check the box
Uncheck the box
Configuration
Events
Misc
Widget hierarchy
Events
21
Events
21User performed the default action (toggled the checkbox)
// Adding a listener using the "on" method
checkbox.on('action', ({ source, checked, value, valid, oldValue, userAction, event }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Checkbox | Checkbox |
checked | Boolean | Checked state (=value) |
value | Boolean | This field's value |
valid | Boolean | True if this field is in a valid state |
oldValue | Boolean | This field's previous value |
userAction | Boolean | Triggered by user taking an action ( |
event | Event | The triggering DOM event if any |
Fired before checkbox is toggled. Returning false from a listener prevents the checkbox from being toggled.
// Adding a listener using the "on" method
checkbox.on('beforeChange', ({ source, checked, value, oldValue, userAction, valid, event }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Checkbox | Checkbox |
checked | Boolean | Checked state (=value) |
value | Boolean | This field's value |
oldValue | Boolean | This field's previous value |
userAction | Boolean | Triggered by user taking an action ( |
valid | Boolean | True if this field is in a valid state. |
event | Event | The triggering DOM event if any |
Fired when checkbox is toggled
// Adding a listener using the "on" method
checkbox.on('change', ({ source, checked, value, oldValue, userAction, valid, event }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Checkbox | Checkbox |
checked | Boolean | Checked state (=value) |
value | Boolean | This field's value |
oldValue | Boolean | This field's previous value |
userAction | Boolean | Triggered by user taking an action ( |
valid | Boolean | True if this field is in a valid state. |
event | Event | The triggering DOM event if any |
Fires when the checkbox is clicked
// Adding a listener using the "on" method
checkbox.on('click', ({ source, event }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Checkbox | The checkbox |
event | Event | DOM event |
Event handlers
21
Event handlers
21User performed the default action (toggled the checkbox)
new Checkbox({
onAction({ source, checked, value, valid, oldValue, userAction, event }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Checkbox | Checkbox |
checked | Boolean | Checked state (=value) |
value | Boolean | This field's value |
valid | Boolean | True if this field is in a valid state |
oldValue | Boolean | This field's previous value |
userAction | Boolean | Triggered by user taking an action ( |
event | Event | The triggering DOM event if any |
Called before checkbox is toggled. Returning false from a listener prevents the checkbox from being toggled.
new Checkbox({
onBeforeChange({ source, checked, value, oldValue, userAction, valid, event }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Checkbox | Checkbox |
checked | Boolean | Checked state (=value) |
value | Boolean | This field's value |
oldValue | Boolean | This field's previous value |
userAction | Boolean | Triggered by user taking an action ( |
valid | Boolean | True if this field is in a valid state. |
event | Event | The triggering DOM event if any |
Called when checkbox is toggled
new Checkbox({
onChange({ source, checked, value, oldValue, userAction, valid, event }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Checkbox | Checkbox |
checked | Boolean | Checked state (=value) |
value | Boolean | This field's value |
oldValue | Boolean | This field's previous value |
userAction | Boolean | Triggered by user taking an action ( |
valid | Boolean | True if this field is in a valid state. |
event | Event | The triggering DOM event if any |
Called when the checkbox is clicked
new Checkbox({
onClick({ source, event }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Checkbox | The checkbox |
event | Event | DOM event |
Typedefs
7
Typedefs
7CSS variables
62
CSS variables
62| Name | Description |
|---|---|
--b-checkbox-size | Checkbox box size |
--b-checkbox-border-radius | Checkbox box border-radius |
--b-checkbox-check-font-size | Checkbox checkmark font size |
--b-checkbox-inner-gap | Gap between checkbox box and text |
--b-checkbox-ring-content | Checkbox ring content, used by Material3 theme to display a ring around the checkbox |
--b-checkbox-background | Checkbox box background |
--b-checkbox-border-width | Checkbox box border-width |
--b-checkbox-border-color | Checkbox box border-color |
| Active | |
--b-checkbox-ring-active-opacity | Active checkbox ring opacity (Material3 theme) |
| Checked | |
--b-checkbox-checked-background | Checked checkbox box background |
--b-checkbox-checked-border-color | Checked checkbox box border-color |
--b-checkbox-checked-check-content | Checked checkbox box content (checkmark icon) |
--b-checkbox-checked-check-color | Checked checkbox checkmark color |
--b-checkbox-checked-hover-background | Hovered checked checkbox box background |
| Disabled | |
--b-checkbox-disabled-opacity | Disabled checkbox opacity |
--b-checkbox-disabled-checked-check-color | Disabled checked checkbox checkmark color |
--b-checkbox-disabled-checked-background | Disabled checked checkbox box background |
--b-checkbox-disabled-background | Disabled checkbox box background |
| Focused | |
--b-checkbox-focus-outline-width | Focused checkbox box outline-width |
--b-checkbox-focus-outline-offset | Focused checkbox box outline-offset |
--b-checkbox-focus-outline-color | Focused checkbox box outline-color |
--b-checkbox-ring-focus-opacity | Focused checkbox ring opacity (Material3 theme) |
| Hovered | |
--b-checkbox-hover-background | Hovered checkbox box background |
--b-checkbox-hover-border-color | Hovered checkbox box border-color |
--b-checkbox-ring-hover-opacity | Hovered checkbox ring opacity (Material3 theme) |