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.

To initialize a check box element the user has to include the following files to the head of the page:

  • smart.base.css - the CSS file containing the styles for the element
  • smart.element.js - the base class
  • smart.button.js - the JS file containing the base class for all button elements
  • smart.checkbox.js - the JS file containing the element definition

The following code adds a check box to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <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> </head> <body> <smart-check-box></smart-check-box> </body> </html>

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

Demo

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.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <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> <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.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <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> </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.