Checkbox

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

<ins-checkbox></ins-checkbox>

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

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

<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>

<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>

<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(', '));
    });
  });