Insites Docs Web Components V2Data EntryCard Select Option

Card Select Option

Last updated on January 07, 2025.

Element: <ins-card-select-option>

Defines an option for card select component.

Overview

The Card Select Option component represents an individual selectable card within a Card Select group. Its behavior mirrors a radio button, where selecting one option deselects all others within the same group. Card select option components are typically used to present distinct, labeled choices within a card select container.

Complete Example
Option 1

Value 1
Option 2

Value 2
Option 3

Value 3

Code Snippet

<ins-card-select label="Card Select Option">
  <div>
    <ins-card-select-option value="value_1">
      <div>
        <strong>Option 1</strong><br/>
        <p>Value 1</p>
      </div>
    </ins-card-select-option>
    <ins-card-select-option value="value_2">
      <div>
        <strong>Option 2</strong><br/>
        <p>Value 2</p>
      </div>
    </ins-card-select-option>
    <ins-card-select-option value="value_3">
      <div>
        <strong>Option 3</strong><br/>
        <p>Value 3</p>
      </div>
    </ins-card-select-option>
  </div>
</ins-card-select>
Events - insCardSelectOptionClicked
Option 1

Value 1
Option 2

Value 2
Option 3

Value 3

Code Snippet

<ins-card-select id="optionClickedEl" label="Card Select Option Clicked">
  <div>
    <ins-card-select-option value="value_1">
      <div>
        <strong>Option 1</strong><br/>
        <p>Value 1</p>
      </div>
    </ins-card-select-option>
    <ins-card-select-option value="value_2">
      <div>
        <strong>Option 2</strong><br/>
        <p>Value 2</p>
      </div>
    </ins-card-select-option>
    <ins-card-select-option value="value_3">
      <div>
        <strong>Option 3</strong><br/>
        <p>Value 3</p>
      </div>
    </ins-card-select-option>
  </div>
</ins-card-select>


<script>
  var dsv = document.getElementById('optionClickedEl')
  dsv.addEventListener('insCardSelectOptionClicked', function(e){
    console.log(e.detail);
  });
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string "" any Defines label of option
value string "" any Defines value of option

 

Events

 

EVENT OBJECT DESCRIPTION
insCardSelectOptionClicked label, value Execute a script when a card select option is clicked

 

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.