Skip to content

Component library

Check Card component

Last updated 2 November 2026

Defines a checkbox like card container. (Important Note: All elements to be put inside the card should be inside a div tag to avoid misrendering.)

Live demo

<ins-checkbox-card 
  id="myCardEl"
  tab-order="1"
  selected
  selected-color="positive"
  label="Card Label"
  value=“Sample value"
  tooltip="This is a sample tooltip content. It also support html content.">

  <div>
    <h4>Card Title</h4>
    <p>This is a sample content.</p>
  </div>
</ins-checkbox-card>
<script>
  var myCardEl = document.getElementById('myCardEl');
  myCardEl.addEventListener('onClickInsCheckboxCard', function(event){
    alert(event.detail.label + ' ' + event.detail.value);
  });
</script>

Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
type string - radio, checkbox Defines the type of the checkbox-card
name string - - Defines the name of the checkbox-card
no-padding boolean false - Defines if the checkbox card should have a padding or not
selected boolean false - Defines the selected state of the checkbox card
selected-color string - Insites color theme(ink, ink1, ink5, ink10, ink40, blue, green, turquoise, positive, warning, negative, information1, information2) or Hex Code RGB Defines color of the selected state
tab-order string - - Defines the tab index of the checkbox card
value string/object - - Defines the value of the checkbox card
label string - - Defines the label of the checkbox card
disabled boolean false - Defines the disabled state of the checkbox card
tooltip string "" - Displays a tooltip beside the label. Supports HTML Content

Events

EVENT OBJECT DESCRIPTION
insClick label, value Emits the label and value of the card when clicked or enter key is pressed
insValueChange value Emits checkbox card value on change

Examples

Overview

The Checkbox Card component offers a card-based interface for multiple selections, similar to a checkbox group. Users can select multiple checkbox card components simultaneously. This component is appropriate for scenarios requiring the selection of multiple items from a list.

Default State

<ins-checkbox-card></ins-checkbox-card>

Direct Set Data

<ins-checkbox-card 
  id="myCheckboxCardEl">

  <div>Sample Content</div>

</ins-checkbox-card>

<script>
    var myCheckboxCardEl = document.getElementById('myCheckboxCardEl');
    myCheckboxCardEl.label = "My Card";
    myCheckboxCardEl.value = {
      myCheckboxCard: "test-value"
    }
    myCheckboxCardEl.selectedColor = "positive";
    myCheckboxCardEl.selected = true;
</script>

Static Data Source

<ins-checkbox-card
  label="My Checkbox Card"
  value="Test"
  selected
  selected-color="blue">

  <div>Sample Content</div>

</ins-checkbox-card>

Disabled State

  <ins-checkbox-card
    label="My Checkbox Card"
    value="Test"
    selected
    disabled
    selected-color="blue">

    <div>Sample Content</div>

  </ins-checkbox-card>