Insites Docs Web Components V2Data EntryButton Select

Button Select

Last updated on June 24, 2025.

Element: <ins-button-select>

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

Complete Example

Code Snippet

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

Code Snippet

<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

Code Snippet

<ins-button-select></ins-button-select>
Description Example

Code Snippet

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

Code Snippet

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

Code Snippet

<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

Code Snippet

<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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

<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

Code Snippet

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

 

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.
Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.