Checkbox - Documentation | www.HtmlElements.com

Overview

Smart.CheckBox represents a check box that has three states: checked, unchecked and indeterminate. The state can be changed by clicking on the box or by setting the checked property.

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.button.js - the JS module which is in the source/modules/ folder and loads all script dependencies. The module includes the smartCheckBox, smartButton, smartToggleButton, smartRepeatButton, smartSwitchButton, smartRadioButton, smartDropDownButton and smartPowerButton.
  • Javascript files
    • smart.element.js -the base class
    • smart.button.js - the JS file containing the definition for the data adapter.
    • smart.checkbox.js - the JS file containing the definition for the checkbox component.

Usage

  • Import a module

    With this approach, we import a module and create the web component by using the Smart function. The #checkbox is a smart-checkbox tag.

    import {smartCheckBox} from "../../source/modules/smart.button.js";
    
    Smart('#checkbox', class {
    get properties() {
    	return {
    		checked: true
    	}
    }
    });
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() { 
    
    }
    
    Using the Smart function is optional. You can use const checkbox = document.querySelector("#checkbox "); and set the properties like that:
    const checkbox = document.querySelector("#checkbox");
    checkbox.checked = true;
    

  • Import a module, Init on Demand

    The following imports the web component's module and creates it on demand, when the document is ready. The #checkbox is a DIV tag.

    import {smartCheckBox} from "../../source/modules/smart.button.js";
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() { 
    const checkbox = new smartCheckBox('#checkbox', {
      
    });
    }
    
  • Load scripts

    The following code adds the custom element to the page.

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
     <script type="text/javascript" src="../../source/smart.element.js"></script>
     <script type="text/javascript" src="../../source/smart.button.js"></script>
     <script type="text/javascript" src="../../source/smart.checkbox.js"></script>
     lt;/head>
    <body>
     <smart-check-box>Check Box</smart-check-box>
    </body>
    </html>

    Note how smart.element.js is declared before everything else. This is mandatory for all custom elements.

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const checkbox = document.createElement('smart-check-box');

Append it to the DOM:
document.body.appendChild(checkbox);

Remove it from the DOM:
checkbox.parentNode.removeChild(checkbox);

Set a property:
checkbox.propertyName = propertyValue;

Get a property value:
const propertyValue = checkbox.propertyName;

Invoke a method:
checkbox.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

checkbox.addEventListener(eventName, eventHandler);

Remove Event Listener:
carousel.removeEventListener(eventName, eventHandler, true);

Appearance

smart-check-box could contain a label. If the user wants to change this label, this can be accomplished by setting the innerHTML property of the element, like so:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.elements.js"></script>
 <script>
     window.onload = function () {
        document.querySelector('smart-check-box').innerHTML = 'CheckBox 1';
     }
 </script>
</head>
<body>
 <smart-check-box>Check Box</smart-check-box>
</body>
</html>

Demo

Behavior

Using the checked property the user can change the check state of the element dynamically as well.

By default the checked of the check box is set to false. This property could be set to true, false or null.

The element offers multiple click modes:

  • press - the element is checked / uncheked on press
  • release - the element is checked / uncheked on release
  • pressAndRelease - the element is checked on press and unchecked on release.

clickMode is a property of the check box that can be changed either from the HTML tag by setting the attribute click-mode and assigning a new value to it or by following the earlier approach and change it dynamically via javascript during the onload stage of the window object or later.

Here's how to set a new clickMode on element initialiation:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.elements.js"></script>
</head>
<body>
 <smart-check-box click-mode="press">Check Box</smart-check-box>
</body>
</html>

Demo

Using the enableContainerClick property the user can change the behavior when different parts of the element are clicked.

By default the enableContainerClick is set to false and the element changes it's state only when the check box is clicked. When this property is set to true, clicking the element's label also changes it's state.

Demo

Keyboard Support

Smart.CheckBox check state could be changed via Space. Space should change the state only to Checked or Unchecked. The element is focusable and can be focused using the Tab key.