Insites Docs Web Components V1Data EntryCheck Card

Check Card

Last updated on August 02, 2024.

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 Heading

This is a sample content.

Code Snippet

<ins-checkbox-card id="myCardEl"
  tab-order="1"
  selected
  selected-color="positive"
  label="Card Label"
  value=“Sample card value">

  <div>
    <h4>Card Heading</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

 

Event

 

EVENT OBJECT DESCRIPTION
onClickInsCheckboxCard label, value Event will emit the label and value of the card when clicked or enter key is pressed

 

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.