Skip to content

Component library

Card Select Option

Last updated 2 November 2026

Defines an option for card select component.

Live demo

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

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
EventLive example
insCardSelectOptionClickedTry insCardSelectOptionClicked

Events - insCardSelectOptionClicked

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

Examples

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.