Insites Docs Web Components V2Data EntryCheckbox

Checkbox

Last updated on August 02, 2024.

Element: <ins-checkbox>

Defines a checkbox field.

Complete Example

Code Snippet

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

Code Snippet

<ins-checkbox></ins-checkbox>
Selected State

Code Snippet

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

Code Snippet

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

Code Snippet

<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

Code Snippet

<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

Code Snippet

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

 

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
Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.