Component library

Checkbox

Last updated 2 November 2026

Defines a checkbox field.

Live demo

<ins-checkbox 
  name="sample" 
  label="Checkbox" 
  value="Checkbox Value"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-checkbox>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
disabled	boolean	false	true, false	Disables the field
checked	boolean	false	true, false	Make the field checked
label	string	""	any	Label shown for the field
name	string	""	any	Defines the field name
value	string	""	any	Defines the field value
tooltip	string	""	-	Displays a tooltip beside the label. Supports HTML Content

Events

EVENT	OBJECT	DESCRIPTION
insCheck	name, checked, value, trueValue, falseValue	Emits checkbox properties on change
insValueChange	value	Emits checkbox value on change

Methods

FUNCTION	PARAMETERS	RETURN	DESCRIPTION
updateCheckState	state (boolean)	n/a	Toggles the checkbox 'checked' property

Examples

Default State

<ins-checkbox></ins-checkbox>

Selected State

<ins-checkbox 
  label="Selected Field" 
  checked>
</ins-checkbox>

Disabled State

<ins-checkbox 
  label="Disabled Field" 
  disabled>
</ins-checkbox>

Direct Value Set

<ins-checkbox 
  id="directFieldEl">
</ins-checkbox>

<script>
  var label = "Set Data";
  var name = "sample";
  var value = "Data";

  var field = document.getElementById('directFieldEl');
  field.addEventListener('didLoad', function(e){
    field.name = name;
    field.label = label;
    field.value = value;
    field.updateCheckState(true);
  });
</script>

Events

<ins-checkbox 
  id="eventFieldEl" 
  name="sample" 
  label="Checkbox" 
  value="Checkbox Value">
</ins-checkbox>

<script>
  let field = document.getElementById('eventFieldEl');
  field.addEventListener('onCheckInsCheckbox', event => {
    var event = event.detail;
    console.log("Checkbox event", event);
    alert("Check console log for event data");
  });
</script>

Checkbox Group

<ins-checkbox 
  name="vehicle" 
  label="Car" 
  value="Car">
</ins-checkbox>

<ins-checkbox 
  name="vehicle" 
  label="Van" 
  value="Van">
</ins-checkbox>

<ins-checkbox 
  name="vehicle" 
  label="Truck" 
  value="Truck">
</ins-checkbox>

<script>
  var group = document.getElementsByName('vehicle');
  var selected = [];
  // add event listener to each checkbox
  group.forEach(field => {
    field.addEventListener('onCheckInsCheckbox', event => {
      var event = event.detail;
      // if checkbox is checked, push value to array
      if(event.checked) {
        selected.push(event.value);
      } else {
      // else, remove item from array
        selected.splice(selected.indexOf(event.value), 1);
      }
      alert("Selected items:" + selected.join(', '));
    });
  });