Insites Docs Web Components V2Data EntryButton Select Option

Button Select Option

Last updated on June 24, 2025.

Element: <ins-button-select-option>

Defines a drop-down list item for Button Select.

Complete Example

Code Snippet

<ins-button-select 
  label="Operating System"
  tooltip="This is a sample tooltip content. It also support html content.">

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

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

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

</ins-button-select>
Searchable Dropdown

Code Snippet

<ins-button-select 
  label="Operating System" 
  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>
Multiselect Dropdown

Code Snippet

<ins-button-select 
  id="buttonSelectMultipleEl"
  label="Operating System" 
  multiple searchable
  placeholder="Please select an operating system"
  search-placeholder="Search an operating system">

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

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

<script type="text/javascript">
  setTimeout(() => {
    var buttonSelectMultipleEl = document.getElementById('buttonSelectMultipleEl');

    buttonSelectMultipleEl.setValue(["Windows"]);
  }, 500);
</script>
Events - insButtonSelectOptionClicked

Code Snippet

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

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

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

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

</ins-button-select>

<script>
  var sel = document.querySelectorAll('ins-button-select-option.os-select-option');
  for (var i = 0; i < sel.length; i++){
    sel[i].addEventListener('insButtonSelectOptionClicked', function(event){
      console.log(event.detail.value);
      alert(event.detail.label);
    });
  };
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string "Option" any Defines label of option
value string "" any Defines value of option
disabled boolean false true, false Disables option dropdown
default boolean false true, false Makes specific option default value of dropdown

 

Events

 

EVENT OBJECT DESCRIPTION
insButtonSelectOptionClicked label, value Execute a script when an option is clicked

 

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.