Component library

Input Search component

Last updated 2 November 2026

Defines a search input box component that generates search options.

Live demo

<ins-input-search label="Complete" tooltip="This is a tooltip." id="completeEl">
</ins-input-search>

<script>
    let completeEl = document.getElementById('completeEl');
    
    completeEl.addEventListener('insSearch', event => {
    if (event.detail.value) {
      completeEl.setOptions(
        [
          {
            "label": "Test Account",
            "value": "1"
          },
          {
            "label": "Test User",
            "value": "2"
          },
          {
            "label": "Test Data Set",
            "value": "3"
          },
          {
            "label": "Performance Test",
            "value": "4"
          },
          {
            "label": "Security Test",
            "value": "5"
          },
          {
            "label": "Integration Test",
            "value": "6"
          },
          {
            "label": "Test Environment",
            "value": "7"
          },
          {
            "label": "Test Report",
            "value": "8"
          },
          {
            "label": "Load Test",
            "value": "9"
          },
          {
            "label": "System Test",
            "value": "10"
          }
        ]
      )
    }
  });
</script>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
label	string	""	any	Defines label of the search input field
value	object, array	-	any	Defines value of search input field
placeholder	string	-	any	Defines the short hint that describes the expected value in the search input field
icon	string	"icon-search-1"	any	Defines the search icon of the search input field
disabled	boolean	false	true, false	Disables search input field
readonly	boolean	false	true, false	Specifies that the search input field is read-only
multiple	boolean	false	true, false	Enables multiple search results selections
has-error	boolean	false	true, false	Specifies validation or mandatory input for the search input field
loading	boolean	false	true, false	Defines if the search input field will be at a loading state
loading-text	string	"Searching..."	any	Defines the loading state text of the search input field
no-results-text	string	"No results found."	any	Defines the no results text of the search input field
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
insInput	value	Execute a script when an element gets user input
insOptionSelect	value	Emits when a search result option is selected
insSearch	value	Emit search input value when search icon is clicked or enter key is pressed

Examples

Description Example

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

Multiple Example

<ins-input-search label="Multiple" id="multipleEl" multiple>
</ins-input-search>

<script>
  let multipleEl = document.getElementById('multipleEl');
    
  multipleEl.addEventListener('insSearch', event => {
    if (event.detail.value) {
      multipleEl.setOptions(
        [
          {
            "label": "Test Account",
            "value": "1"
          },
          {
            "label": "Test User",
            "value": "2"
          },
          {
            "label": "Test Data Set",
            "value": "3"
          },
          {
            "label": "Performance Test",
            "value": "4"
          },
          {
            "label": "Security Test",
            "value": "5"
          },
          {
            "label": "Integration Test",
            "value": "6"
          },
          {
            "label": "Test Environment",
            "value": "7"
          },
          {
            "label": "Test Report",
            "value": "8"
          },
          {
            "label": "Load Test",
            "value": "9"
          },
          {
            "label": "System Test",
            "value": "10"
          }
        ]
      )
    }
  });
</script>

Read Only State

<ins-input-search label="Readonly" id="readonlyEl" readonly>
</ins-input-search>

<script>
    let readonlyEl = document.getElementById('readonlyEl');
  
    setTimeout(() => {
      readonlyEl.setValue({
        "label": "Test Account",
        "value": "1"
      });
    }, 300);
</script>

Error State

<ins-input-search label="Error" has-error error-message="This field is required.">
</ins-input-search>

Direct Set Data

<ins-input-search label="Direct Set Data" id="directEl" readonly>
</ins-input-search>

<script>
    let directEl = document.getElementById('directEl');
  
    setTimeout(() => {
      directEl.setValue({
        "label": "Test Account",
        "value": "1"
      });
    }, 300);
  
    directEl.addEventListener('insSearch', event => {
    if (event.detail.value) {
      directEl.setOptions(
        [
          {
            "label": "Test Account",
            "value": "1"
          },
          {
            "label": "Test User",
            "value": "2"
          },
          {
            "label": "Test Data Set",
            "value": "3"
          },
          {
            "label": "Performance Test",
            "value": "4"
          },
          {
            "label": "Security Test",
            "value": "5"
          },
          {
            "label": "Integration Test",
            "value": "6"
          },
          {
            "label": "Test Environment",
            "value": "7"
          },
          {
            "label": "Test Report",
            "value": "8"
          },
          {
            "label": "Load Test",
            "value": "9"
          },
          {
            "label": "System Test",
            "value": "10"
          }
        ]
      )
    }
  });
</script>

Direct Set Data Multiple

<ins-input-search label="Direct Set Data Multiple" id="directMultipleEl" multiple>
</ins-input-search>

<script>
    let directMultipleEl = document.getElementById('directMultipleEl');
  
    setTimeout(() => {
      directMultipleEl.setValue([
        {
          "label": "Test Account",
          "value": "1"
        },
        {
          "label": "Test User",
          "value": "2"
        }
      ]);
    }, 400);
  
    directMultipleEl.addEventListener('insSearch', event => {
    if (event.detail.value) {
      directMultipleEl.setOptions(
        [
          {
            "label": "Test Account",
            "value": "1"
          },
          {
            "label": "Test User",
            "value": "2"
          },
          {
            "label": "Test Data Set",
            "value": "3"
          },
          {
            "label": "Performance Test",
            "value": "4"
          },
          {
            "label": "Security Test",
            "value": "5"
          },
          {
            "label": "Integration Test",
            "value": "6"
          },
          {
            "label": "Test Environment",
            "value": "7"
          },
          {
            "label": "Test Report",
            "value": "8"
          },
          {
            "label": "Load Test",
            "value": "9"
          },
          {
            "label": "System Test",
            "value": "10"
          }
        ]
      )
    }
  });
</script>

Setting Options with loading and noResults State

To set options, use insSearch event trigger and setOptions to set search results.

<ins-input-search label="Direct Set Options" id="directSetEl">
</ins-input-search>

<script>
  // this is simulating an API request
  let directSetEl = document.getElementById('directSetEl');
  
  directSetEl.addEventListener('insSearch', event => {
    // if search input value is "test"
    if (event.detail.value === "test") {
      // setting 'loading' to true will start the loading state
      directSetEl.loading = true;
      setTimeout(() => {
        directSetEl.setOptions(
          [
            {
              "label": "Test Account",
              "value": "1"
            },
            {
              "label": "Test User",
              "value": "2"
            },
            {
              "label": "Test Data Set",
              "value": "3"
            },
            {
              "label": "Performance Test",
              "value": "4"
            },
            {
              "label": "Security Test",
              "value": "5"
            },
            {
              "label": "Integration Test",
              "value": "6"
            },
            {
              "label": "Test Environment",
              "value": "7"
            },
            {
              "label": "Test Report",
              "value": "8"
            },
            {
              "label": "Load Test",
              "value": "9"
            },
            {
              "label": "System Test",
              "value": "10"
            }
          ]
        )
        // setting 'loading' to false will end the loading state
        directSetEl.loading = false;
      }, 1500);
    } else {
      // settings options to [ ] empty array will display no results
      directSetEl.setOptions([]);
      directSetEl.loading = false;
    }
  });
</script>