Skip to content

Component library

Checkbox Group component

Last updated 2 November 2026

Used for grouping of ins-checkbox component.

Live demo

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

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

Examples

Description Example

<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

<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

<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

<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

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