Component library

Filter Item component

Last updated 2 November 2026

Displays dropdown items of ins-filter.

Live demo

<ins-filter 
  with-date-filter 
  Date-title="Date Period"
  tooltip="This is a sample tooltip content. It also support html content.">

	<ins-filter-item
	name="Operating System"
	options='["Windows", "macOS", "Linux"]'>
	</ins-filter-item>

</ins-filter>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
name	string	"Category Label"	any	Defines name of filter items
options	string/array	["Category 1", "Category 2", "Category 3"]	any	Defines item options
selected	string	any	any	Defines selected option

Events

EVENT	OBJECT	DESCRIPTION
insSelect	stateFrom, stateTo	Execute a script when a filter item has been selected

Examples

Default State

<ins-filter>

  <ins-filter-item></ins-filter-item>

</ins-filter>

Direct Set Data

  <ins-filter>

    <ins-filter-item 
      id="directSetDataFilterItem">
    </ins-filter-item>
 
 </ins-filter>

  <script>
    var filter = document.getElementById('directSetDataFilterItem');
    filter.addEventListener('didLoad', function(e) {
      var options = ["CEO", "Manager"];
      filter.name = 'Position';
      filter.options = options;
    });
  </script>

Static Data Source

<ins-filter>

  <ins-filter-item
    name="Operating System"
    options='["Windows", "macOS", "Linux"]'>
  </ins-filter-item>

</ins-filter>

Static Data Source

<ins-filter>
  <ins-filter-item
    name="Operating System"
    id="insSelect"
    options='["Windows", "macOS", "Linux"]'>
  </ins-filter-item>
</ins-filter>

<script>
  const insSelect = document.getElementById('insSelect')
  insSelect.addEventListener('insSelect', event => {
  console.log(event.detail.name);
  console.log(event.detail.option);
  alert("Hello! I am an alert box!!");
  });
</script>