Component library

Input Select component

Last updated 2 November 2026

Renders Container for drop-down list.

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="macOS" 
    value="macOS">
  </ins-input-select-option>

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

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
label	string		any	Defines label of dropdown
placeholder	string	-	any	Defines the short hint that describes the expected value in the input field
disabled	boolean	false	true, false	Disables dropdown field
readonly	boolean	false	true, false	Specifies that the dropdown field is read-only
searchable	boolean	false	true, false	Enables drop-down to have searchable feature
searchable-placeholder	string	"Type here to search for options"	any	Defines the short hint that describes the expected value in the search field
multiple	boolean	false	true, false	Enables multiple selection
value	any		any	Defines value of dropdown list
has-error	boolean	false	true, false	Specifies validation or mandatory input for the input field
drop-up	boolean	false	true, false	Show options on top when field is near bottom of the screen
dynamic-option	boolean	false	true, false	Creates input field on the dropdown option
dynamic-placeholder	string	-	any	Defines if the dynamic option input field placeholder
dynamic-button-label	string	"Add"	any	Defines if the dynamic option input button label
dynamic-has-error	boolean	false	true, false	Defines if the dynamic option input field has an error
dynamic-error-message	string	-	any	Defines if the error message displayed below the dynamic option input.
error-message	string	-	any	Defines the error message when input element is wrong
lookup	boolean	false	true, false	Define if the select will enable lookup functionalities
lookup-loading	boolean	false	true, false	Define if the select will render as initializing
lookup-scrolling	boolean	false	true, false	Define if the select will enable infinite scrolling
tooltip	string	-	any	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
insChange	value	Emits the value of the selected option
insOptionSelect	{ event_type, selected, selectedOptions }	Emits the event type (add,remove), selected values and a list of the selected option's label and value
insDynamicSubmit	value	Emits the value of the dynamic option input triggered by the "ADD" button
insSearch	keyword	Emits the search keyword. This event is only triggered when dynamic-search is true.
insLoadMore	-	Emits when scroll hits the last option. This event is only triggered when infinite-scroll is true.

Methods

METHOD	OBJECT	DESCRIPTION
getValue	How to get the value using getValue: `document.getElementById('elementID').getValue();`	Retrieves the current value of the component.
setValue	How to change the value using setValue: `document.getElementById('elementID').setValue(value);`	Sets the currently selected option of the component to the option with the matching value attribute.

Examples

Multiple Attribute

<ins-input-select 
  label="Operating Systems" 
  multiple
  placeholder=" Select ">

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

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

Description Example

<ins-input-select
  label="Description"
  html-description
  description="This is a <strong>Description</strong> <i>Example</i>">
</ins-input-select>

Default State

<ins-input-select></ins-input-select>

Error State

<ins-input-select 
  label="Required*" 
  has-error error-message="This is a required field">
</ins-input-select>

Direct Set Data

<ins-input-select 
  id="dsv">
</ins-input-select>

<script>
  var dsv = document.getElementById('dsv')
  dsv.addEventListener('didLoad', function(e){
    dsv.label = 'Direct Set Value';
  });
</script>

Searchable Attribute

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

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

Placeholder Attribute

<ins-input-select
  label="Placeholder"
  placeholder="Value Change">
</ins-input-select>

Disabled Attribute

<ins-input-select label="Disabled" disabled></ins-input-select>

Read-Only Attribute

<ins-input-select label="Read Only" readonly></ins-input-select>

Options Data Example

<ins-input-select id="insInputSelectEl" label="Options Data" label-key="name" value-key="id">
    <ins-input-select-option 
    label="Static 2" 
    value="Static 2">
  </ins-input-select-option>
 
  <ins-input-select-option 
    label="Static 1" 
    value="Static 2">
  </ins-input-select-option>

</ins-input-select>
<script>
  const insInputSelectEl = document.getElementById('insInputSelectEl');
  insInputSelectEl.optionsData = [
    { name: "John Doe", id: 1 },
    { name: "Jane Doe", id: 2 },
    { name: "James Smith", id: 3 },
    { name: "Julia Smith", id: 4 },
  ]
</script>

Dynamic Option Attributes

<ins-input-select 
  label="With Dynamic Option" 
  dynamic-option
  id="dynamicSelectEl">

  <div id="dynamicOptionsWrap">

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

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

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

  </div>

</ins-input-select>

<script>
  let dynamicSelectEl = document.getElementById('dynamicSelectEl');
  let dynamicOptionsWrap = document.getElementById('dynamicOptionsWrap');

  let addSelectOption = value => {
    let insSelectOpion = document.createElement('ins-input-select-option');
    insSelectOpion.setAttribute('label', value);
    insSelectOpion.setAttribute('value', value);

    dynamicOptionsWrap.appendChild(insSelectOpion);
    dynamicSelectEl.dynamicCloseOptions();
  }

  dynamicSelectEl.addEventListener('insDynamicSubmit', e => {
    if (!e.detail){
      dynamicSelectEl.dynamicHasError = true;
      dynamicSelectEl.dynamicErrorMessage = "Please enter a value.";
    } else addSelectOption(e.detail);
  });
</script>

insLoadMore Example

<ins-input-select 
  label="Lookup Options"
  lookup
  id="lookupSelectEl">

  <div id="lookupOptionsWrap">

  </div>

</ins-input-select>

<script type="text/javascript">
  var lookupSelectEl = document.getElementById('lookupSelectEl');
  var lookupOptionsWrap = document.getElementById('lookupOptionsWrap');
  var lookupOptions = [];
  var optionsCount = 0;
  
  for (counter = 0; counter < 300; counter++) {
     lookupOptions.push("Option " + (counter + 1));
  }
  
  var addLookupSelectOption = function(value) {
    var insSelectOption = document.createElement('ins-input-select-option');
    insSelectOption.setAttribute('label', value);
    insSelectOption.setAttribute('value', value);

    lookupOptionsWrap.appendChild(insSelectOption);
  }
  
  var lookupSelectLoading = function() {
    lookupSelectEl.lookupLoading = true;
    
    setTimeout(function() {
      lookupSelectEl.lookupLoading = false;
      lookupSelectEl.setLoadingState(false);
    }, 3000);
  };
  
  for (counter = 0; counter < 50; counter++) {
    addLookupSelectOption(lookupOptions[optionsCount]);
    optionsCount++;
  }
  lookupSelectEl.lookupScrolling = true;
  
  lookupSelectEl.addEventListener("insLoadMore", function() {
    setTimeout(function() {
      if (optionsCount < lookupOptions.length - 1) {
        for (counter = 0; counter < 50; counter++) {
          addLookupSelectOption(lookupOptions[optionsCount]);
          optionsCount++;
        }
      }
      lookupSelectEl.setLoadingState(false);
    }, 1000);
    
    if (optionsCount === lookupOptions.length) lookupSelectEl.setLoadingState(false);
  });
  
  lookupSelectLoading();
</script>

insSearch Example

<ins-input-select 
  label="insSearch Options"
  lookup
  searchable
  id="insSearchEl">

  <div id="insSearchWrap">

  </div>

</ins-input-select>

<!--
  This code just automatically adds an option based on your search input.
  It will still depend on how you want to handle the search results in your API.
-->

<script type="text/javascript">
    var insSearchEl = document.getElementById('insSearchEl');
    var insSearchWrap = document.getElementById('insSearchWrap');
  
    var addInsSearchOption = function(value) {
      var insSelectOption = document.createElement('ins-input-select-option');
      insSelectOption.setAttribute('label', value);
      insSelectOption.setAttribute('value', value);

      insSearchWrap.innerHTML = "";
      insSearchWrap.appendChild(insSelectOption);
      insSearchEl.getElementsByClassName('no-more-options')[0]?.remove();
      
      setTimeout(function() {
        insSearchEl.setSearchingState(false);
        insSearchEl.setLoadingState(false);
      }, 750);
    }
    
    insSearchEl.addEventListener("insSearch", function(event) {
      addInsSearchOption(event.detail);
    });
</script>