Check Card

Published on February 17, 2021, updated on June 16, 2021

Element: <ins-checkbox-card>

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

Complete Example

Card Title

This is a sample content.

Code Snippet

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

Default State

Code Snippet

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

Direct Set Data

Sample Content

Code Snippet

<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

Sample Content

Code Snippet

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

  <div>Sample Content</div>

</ins-checkbox-card>

Disabled State

Sample Content

Code Snippet

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

    <div>Sample Content</div>

  </ins-checkbox-card>

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

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.