Insites Docs Web Components V2Data EntryCard Select

Card Select

Last updated on February 14, 2025.

Element: <ins-card-select>

Defines a card select field.

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.

Complete Example
Option 1

Value 1
Option 2

Value 2
Option 3

Value 3

Code Snippet

<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>
Description Example
Option 1

Value 1
Option 2

Value 2

Code Snippet

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

Value 1
Option 2

Value 2

Code Snippet

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

Value 1
Option 2

Value 2

Code Snippet

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

Value 1
Option 2

Value 2
Option 3

Value 3
Option 4

Value 4

Code Snippet

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

Value 1
Option 2

Value 2

Code Snippet

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

Value 1
Option 2

Value 2
Option 3

Value 3
Option 4

Value 4

Code Snippet

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

 

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

 

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.