Captures boolean input with an optional indeterminate mode.
Usage
Here are several predefined checkbox styles, each serving its own semantic purpose.
Male
Want ice cream?
Join the group?
Male
Want ice cream?
Join the group?
Sizes
Here are several predefined checkbox sizes, each serving its own semantic purpose.
Large
Medium
Large
Medium
Readonly
Make input look inactive by adding the disabled boolean
attribute to any
<input> element.
Readonly checkbox
Readonly checkbox
Readonly checkbox
Readonly checkbox
Disabled
Make input look inactive by adding the disabled boolean
attribute to any
<input> element.
Disabled checkbox
Disabled checkbox
Disabled checkbox
Disabled checkbox
Events
On change of checkbox value a CustomEvent goat:change is triggered by
the element.
Change Event?
document.querySelector('#change-checkbox-field').addEventListener('goat:change',
function(event) {
console.log('Input changed to :: ' + event.target.value);
});