Component library

Card Select component

Last updated 2 November 2026

Defines a card select field.

Live demo

<ins-card-select label="Card Select" tooltip="This is a sample tooltip content. It also support html content.">
  <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
multiple	boolean	false	true, false	Defines if the field can select multiple values
disabled	boolean	false	true, false	Disables the field
readonly	boolean	false	true, false	Make the field readonly
has-error	boolean	false	true, false	Defines if the field is invalid / error
error-message	string	""	any	Message shown when field has error
label	string	""	any	Label shown for the field
value	string	""	any	Defines the field value
tooltip	string	""	-	Displays a tooltip beside the label. Supports HTML Content
html-description	boolean	false	true, false	Enables HTML tags in the description
description	string	""	any	Defines the description value

Events

EVENT	OBJECT	DESCRIPTION
insInput	keyboard event	Emits keyboard event on card option check

Examples

Overview

The Card Select component serves as a container for a set of selectable cards, represented by Card Select Option components. It implements single-selection behavior, analogous to a radio button group, ensuring that only one option can be selected at any given time. This functionality makes the card select component suitable for use cases requiring a single choice from a predefined set of options.

Description Example

<ins-card-select
  label="Description Example"
  html-description
  description="This is a <strong>Description</strong> <i>Example</i>">
  <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>
  </div>
</ins-card-select>

Error State

<ins-card-select
  label="Error State"
  has-error
  error-message="This field is required.">
  <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>
  </div>
</ins-card-select>

Disabled Attribute

<ins-card-select
  label="Disabled State"
  disabled>
  <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>
  </div>
</ins-card-select>

Multiple Attribute

<ins-card-select
  label="Multiple Attribute"
  multiple>
  <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>
    <ins-card-select-option value="value_4">
      <div>
        <strong>Option 4</strong><br/>
        <p>Value 4</p>
      </div>
    </ins-card-select-option>
  </div>
</ins-card-select>

Direct Set Data

<ins-card-select id="directSetDataEl">
  <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>
  </div>
</ins-card-select>


<script>
  var dsv = document.getElementById('directSetDataEl')
  dsv.addEventListener('didLoad', function(e){
    dsv.setValue("value_1");
  });
</script>

Direct Set Data for Multiple Attribute

<ins-card-select id="directSetDataElMultiple" multiple>
  <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>
    <ins-card-select-option value="value_4">
      <div>
        <strong>Option 4</strong><br/>
        <p>Value 4</p>
      </div>
    </ins-card-select-option>
  </div>
</ins-card-select>


<script>
  var dsvm = document.getElementById('directSetDataElMultiple')
  dsvm.addEventListener('didLoad', function(e){
    dsvm.setValue(["value_1", "value_3"]);
  });
</script>