CheckBox JAVASCRIPT UI Component API

CheckBox Javascript API

Class

CheckBox

Checkbox is a component used for allowing a user to make a multiple choice. Broadly used in the forms and surveys.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property.

 <smart-check-box animation='none'></smart-check-box>

Set the animation property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.animation = 'simple';

Get the animation property.

 const checkbox = document.querySelector('smart-check-box');

 let animation = checkbox.animation;

checkedboolean

Sets or gets the checked state.

Default value

false

Try a demo showcasing the checked property.

Example

Set the checked property.

 <smart-check-box checked></smart-check-box>

Set the checked property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.checked = false;

Get the checked property.

 const checkbox = document.querySelector('smart-check-box');

 let checked = checkbox.checked;

checkMode"both" | "input" | "label"

Determines which part of the element can be used to toggle it.

Allowed Values

"both" - Both the label and input can be used to toggle the state of the element.
"input" - Only the input can be used to toggle the state of the element.
"label" - Only the label can be used to toggle the state of the element.

Default value

"both"

Example

Set the checkMode property.

 <smart-check-box check-mode='input'></smart-check-box>

Set the checkMode property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.checkMode = 'label';

Get the checkMode property.

 const checkbox = document.querySelector('smart-check-box');

 let checkMode = checkbox.checkMode;

clickMode"press" | "release" | "pressAndRelease"

Sets the click mode of the checkbox.

Allowed Values

"press" - The element fires a click event when pressed
"release" - The element fires a click event when released.
"pressAndRelease" - The element fires a click event once when pressed and again when released.

Default value

"release"

Example

Set the clickMode property.

 <smart-check-box click-mode='press'></smart-check-box>

Set the clickMode property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.clickMode = 'pressAndRelease';

Get the clickMode property.

 const checkbox = document.querySelector('smart-check-box');

 let clickMode = checkbox.clickMode;

disabledboolean

Enables or disables the checkbox.

Default value

false

Example

Set the disabled property.

 <smart-check-box disabled></smart-check-box>

Set the disabled property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.disabled = false;

Get the disabled property.

 const checkbox = document.querySelector('smart-check-box');

 let disabled = checkbox.disabled;

innerHTMLstring

Sets or gets the elements's innerHTML.

Default value

""""

Example

Set the innerHTML property.

 <smart-check-box inner-h-t-m-l='Checkbox Label'></smart-check-box>

Set the innerHTML property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.innerHTML = 'Checkbox Label';

Get the innerHTML property.

 const checkbox = document.querySelector('smart-check-box');

 let innerHTML = checkbox.innerHTML;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

 <smart-check-box locale='de'></smart-check-box>

Set the locale property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.locale = 'fr';

Get the locale property.

 const checkbox = document.querySelector('smart-check-box');

 let locale = checkbox.locale;

localizeFormatFunctionfunction | null

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property.

 <smart-check-box localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-check-box>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

 const checkbox = document.querySelector('smart-check-box');

 let localizeFormatFunction = checkbox.localizeFormatFunction;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value

"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Example

Set the messages property.

 <smart-check-box messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-check-box>

Set the messages property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}:  Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property.

 const checkbox = document.querySelector('smart-check-box');

 let messages = checkbox.messages;

namestring

Sets or gets the name attribute for the element. Name is used when submiting HTML forms.

Default value

""""

Example

Set the name property.

 <smart-check-box name='Name'></smart-check-box>

Set the name property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.name = 'New Name';

Get the name property.

 const checkbox = document.querySelector('smart-check-box');

 let name = checkbox.name;

readonlyboolean

If the element is readonly, users cannot interact with it.

Default value

false

Example

Set the readonly property.

 <smart-check-box readonly></smart-check-box>

Set the readonly property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.readonly = true;

Get the readonly property.

 const checkbox = document.querySelector('smart-check-box');

 let readonly = checkbox.readonly;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-check-box right-to-left></smart-check-box>

Set the rightToLeft property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.rightToLeft = true;

Get the rightToLeft property.

 const checkbox = document.querySelector('smart-check-box');

 let rightToLeft = checkbox.rightToLeft;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

 <smart-check-box unfocusable></smart-check-box>

Set the unfocusable property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.unfocusable = false;

Get the unfocusable property.

 const checkbox = document.querySelector('smart-check-box');

 let unfocusable = checkbox.unfocusable;

themestring

Determines the theme. Theme defines the look of the element

Default value

Example

Set the theme property.

 <smart-check-box theme='blue'></smart-check-box>

Set the theme property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.theme = 'red';

Get the theme property.

 const checkbox = document.querySelector('smart-check-box');

 let theme = checkbox.theme;

valuestring

Sets or gets the value of the element.

Default value

""""

Try a demo showcasing the value property.

Example

Set the value property.

 <smart-check-box value='Value'></smart-check-box>

Set the value property by using the HTML Element's instance.

 const checkbox = document.querySelector('smart-check-box');

 checkbox.value = 'New Value';

Get the value property.

 const checkbox = document.querySelector('smart-check-box');

 let value = checkbox.value;

Events

changeCustomEvent

This event is triggered when the widget is checked/unchecked.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

ev.detailObject

ev.detail.value - A boolean value indicating the new state of the button ( checked or not ).

ev.detail.oldValue - A boolean value indicating the previous state of the button ( checked or not ).

ev.detail.changeType - A string flag indicating whether the change event was triggered via API or an event.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the change event.

Example

Set up the event handler of change event.

const checkbox = document.querySelector('smart-check-box');
checkbox.addEventListener('change', function (event) {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue,
        changeType = detail.changeType;

	// event handling code goes here.
})

checkValueCustomEvent

This event is triggered when the widget is checked.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCheckValue

Arguments

evCustomEvent

ev.detailObject

ev.detail.changeType - A string flag indicating whether the change event was triggered via API or an event.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of checkValue event.

const checkbox = document.querySelector('smart-check-box');
checkbox.addEventListener('checkValue', function (event) {
    const detail = event.detail,
        changeType = detail.changeType;

	// event handling code goes here.
})

uncheckValueCustomEvent

This event is triggered when the widget is unchecked.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onUncheckValue

Arguments

evCustomEvent

ev.detailObject

ev.detail.changeType - A string flag indicating whether the change event was triggered via API or an event.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of uncheckValue event.

const checkbox = document.querySelector('smart-check-box');
checkbox.addEventListener('uncheckValue', function (event) {
    const detail = event.detail,
        changeType = detail.changeType;

	// event handling code goes here.
})