Insites Docs Web Components V1Data 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"></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

 

Events

 

EVENT OBJECT DESCRIPTION
onCheckInsCheckbox name, checked, value Emits checkbox properties 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.