Component library

Input Select Option component

Last updated 2 November 2026

Defines a drop-down list item for Input Select.

Live demo

<ins-input-select 
  label="Operating System"
  tooltip="This is a sample tooltip content. It also support html content.">

  <ins-input-select-option 
    label="Windows" 
    value="Windows" 
    Default>
  </ins-input-select-option>

  <ins-input-select-option 
    label="macOS" 
    value="macOS">
  </ins-input-select-option>

  <ins-input-select-option 
    label="Linux" 
    value="Linux">
   </ins-input-select-option>

</ins-input-select>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
label	string	"Option"	any	Defines label of option
value	string	""	any	Defines value of option
disabled	boolean	false	true, false	Disables option dropdown
default	boolean	false	true, false	Makes specific option default value of dropdown

Events

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

Event	Live example
`insInputSelectOptionClicked`	Try insInputSelectOptionClicked

Events - insInputSelectOptionClicked

<ins-input-select 
  label="Operating System">

  <ins-input-select-option 
    class="os-select-option" 
    label="macOS" 
    value="macOS">
  </ins-input-select-option>

  <ins-input-select-option 
    class="os-select-option" 
    label="Linux" 
    value="Linux">
  </ins-input-select-option>

  <ins-input-select-option 
    class="os-select-option" 
    label="Windows" 
    value="Windows">
  </ins-input-select-option>

</ins-input-select>

<script>
  var sel = document.querySelectorAll('ins-input-select-option.os-select-option');
  for (var i = 0; i < sel.length; i++){
    sel[i].addEventListener('insInputSelectOptionClicked', function(event){
      console.log(event.detail.value);
      alert(event.detail.label);
    });
  };
</script>

Examples

Searchable Dropdown

<ins-input-select 
  label="Operating System" 
  searchable>
  <ins-input-select-option label="macOS" value="macOS">
  </ins-input-select-option>
  
  <ins-input-select-option label="Windows" value="Windows" default>
  </ins-input-select-option>
  
  <ins-input-select-option label="Linux" value="Linux">
  </ins-input-select-option>
</ins-input-select>

Multiselect Dropdown

<ins-input-select 
  id="selectMultipleEl"
  label="Operating System" 
  multiple searchable
  placeholder="Please select an operating system"
  search-placeholder="Search an operating system">

  <ins-input-select-option 
    label="Windows" 
    value="Windows">
  </ins-input-select-option>

  <ins-input-select-option 
    label="Linux" 
    value="Linux">
  </ins-input-select-option>

  <ins-input-select-option 
    label="macOS" 
    value="macOS">
  </ins-input-select-option>

  <ins-input-select-option 
    label="Android" 
    value="Android">
  </ins-input-select-option>
  
  <ins-input-select-option 
    label="iOS" 
    value="IOS">
  </ins-input-select-option>
  
  <ins-input-select-option 
    label="ChromeOS" 
    value="ChromeOS">
  </ins-input-select-option>
  
</ins-input-select>

<script type="text/javascript">
  setTimeout(() => {
    var selectMultipleEl = document.getElementById('selectMultipleEl');

    selectMultipleEl.setValue(["Windows"]);
  }, 500);
</script>

Static Data Source

<ins-input-select label="Static" value="Android">

  <ins-input-select-option 
    label="Android" 
    value="Android">
  </ins-input-select-option>

  <ins-input-select-option 
    label="iOS" 
    value="iOS">
  </ins-input-select-option>

  <ins-input-select-option 
    label="Windows" 
    value="Windows">
  </ins-input-select-option>

</ins-input-select>