Component library

Button Select component

Last updated 2 November 2026

The component renders a container for the button-styled drop-down list.

Live demo

<ins-button-select 
  label="Operating System" 
  placeholder=" Select ">

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

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

</ins-button-select>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
label	string		any	Defines label of dropdown
small	boolean		false	Small size version of the component
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
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.

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 Atrribute

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

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

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

</ins-button-select>

Default State

<ins-button-select></ins-button-select>

Description Example

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

Error State

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

Direct Set Data

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

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

Searchable Attribute

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

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

Placeholder Attribute

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

Disabled Attribute

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

Small Attribute

<ins-button-select 
  small 
  label="Operating System" 
  placeholder=" Select ">

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

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

Readonly Atrribute

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

Options Data Example

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

</ins-button-select>
<script>
  const insButtonSelectEl = document.getElementById('insButtonSelectEl');
  insButtonSelectEl.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-button-select 
  label="With Dynamic Option" 
  dynamic-option
  id="dynamicSelectEl">

  <div id="dynamicOptionsWrap">

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

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

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

  </div>

</ins-button-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>