Insites Docs Web Components V2Data EntryCheckbox Group

Checkbox Group

Last updated on January 06, 2025.

Element: <ins-checkbox-group>

Used for grouping of ins-checkbox component.

Complete Example

Code Snippet

<ins-checkbox-group label="Checkbox Group" tooltip="This is a sample tooltip content. It also support html content.">
  <div>
    <ins-checkbox label="Option 1" value="1"></ins-checkbox>
    <ins-checkbox label="Option 2" value="2"></ins-checkbox>
  </div>
</ins-checkbox-group>
Description Example

Code Snippet

<ins-checkbox-group label="Description Example"
  html-description
  description="This is a <strong>Description</strong> <i>Example</i>">
  <div>
    <ins-checkbox label="Option 1" value="1"></ins-checkbox>
    <ins-checkbox label="Option 2" value="2"></ins-checkbox>
  </div>
</ins-checkbox-group>
Error State

Code Snippet

<ins-checkbox-group label="Checkbox Group Error" has-error>
  <div>
    <ins-checkbox label="Option 1" value="1"></ins-checkbox>
    <ins-checkbox label="Option 2" value="2"></ins-checkbox>
  </div>
</ins-checkbox-group>
Disabled Attribute

Code Snippet

<ins-checkbox-group label="Checkbox Group Disabled" disabled>
  <div>
    <ins-checkbox label="Option 1" value="1"></ins-checkbox>
    <ins-checkbox label="Option 2" value="2"></ins-checkbox>
  </div>
</ins-checkbox-group>
Horizontal Attribute

Code Snippet

<ins-checkbox-group label="Checkbox Group Horizontal" horizontal>
  <div>
    <ins-checkbox label="Option 1" value="1"></ins-checkbox>
    <ins-checkbox label="Option 2" value="2"></ins-checkbox>
    <ins-checkbox label="Option 3" value="3"></ins-checkbox>
    <ins-checkbox label="Option 4" value="4"></ins-checkbox>
  </div>
</ins-checkbox-group>
Direct Set Data

Code Snippet

<ins-checkbox-group id="directSetDataEl" label="Checkbox Group">
  <div>
    <ins-checkbox label="Option 1" value="1"></ins-checkbox>
    <ins-checkbox label="Option 2" value="2"></ins-checkbox>
    <ins-checkbox label="Option 3" value="3"></ins-checkbox>
    <ins-checkbox label="Option 4" value="4"></ins-checkbox>
  </div>
</ins-checkbox-group>


<script>
  var dsv = document.getElementById('directSetDataEl')
  dsv.addEventListener('didLoad', function(e){
    dsv.setValue(["1", "4"]);
  });
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string any Defines label of checkbox group
disabled boolean false true, false Disables checkbox group field
readonly boolean false true, false Specifies that the checkbox group field is read-only
value array any Defines value of checkbox group field
has-error boolean false true, false Specifies validation or mandatory input for the checkbox group field
error-message string - any Defines the error message of the checkbox group field
horizontal boolean false true, false Defines if the checkbox group field horizontal orientation
tooltip string - any Defines the tooltip of checkbox group field
html-description boolean false true, false Enables HTML tags in the description
description string "" any Defines the description value

 

Events

 

EVENT OBJECT DESCRIPTION
insInput value Emits the value of the selected radio field
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.