Insites Docs Web Components V1Data EntrySelect

Select

Last updated on August 02, 2024.

Element: <ins-select>

Renders Container for drop-down list.

Complete Example

Code Snippet

<ins-select label="Operating System"></ins-select>
Default State

Code Snippet

<ins-select></ins-select>
Error State

Code Snippet

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

Code Snippet

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

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

Code Snippet

<ins-select label="select" searchable></ins-select>
Placeholder Attribute

Code Snippet

<ins-select placeholder="Value Change"></ins-select>
Disabled Attribute

Code Snippet

<ins-select disabled></ins-select>
Read-Only Attribute

Code Snippet

<ins-select readonly></ins-select>
Button Attribute

Code Snippet

<ins-select button label="Sample" placeholder=" Select ">
  <ins-select-option label="macOS" value="macOS"></ins-select-option>
  <ins-select-option label="Windows" value="Windows"></ins-select-option>
</ins-select>
Small Attribute

Code Snippet

<ins-select small button label="Operating System" placeholder=" Select ">
  <ins-select-option label="macOS" value="macOS"></ins-select-option>
  <ins-select-option label="Windows" value="Windows"></ins-select-option>
</ins-select>
Dynamic Options Attribute

Code Snippet

<ins-select label="With Dynamic Option" with-dynamic-option
  with-dynamic-option-validate id="dynamicSelectEl">
  <div id="dynamicOptionsWrap">
    <ins-select-option label="macOS" value="macOS"></ins-select-option>
    <ins-select-option label="Windows" value="Windows"></ins-select-option>
    <ins-select-option label="Linux" value="Linux"></ins-select-option>
  </div>
</ins-select>
<script>
  let dynamicSelectEl = document.getElementById('dynamicSelectEl');
  let dynamicOptionsWrap = document.getElementById('dynamicOptionsWrap');

  let addSelectOption = value => {
    let insSelectOpion = document.createElement('ins-select-option');
    insSelectOpion.setAttribute('label', value);
    insSelectOpion.setAttribute('value', value);

    dynamicOptionsWrap.appendChild(insSelectOpion);
    dynamicSelectEl.resetDynamicOption();
  }

  dynamicSelectEl.addEventListener('insSubmit', 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
placeholder string "Select or type" any Defines the short hint that describes the expected value in the input field
button-label string "Add" any Defines label of dropdown button
dynamic-placeholder string any N/A
disabled boolean false true, false Disables dropdown field
readonly boolean false true, false Specifies that the dropdown field is read-only
button boolean false true, false Merges label and placeholder into a single button dropdown
small boolean false true, false Renders drop-down to be small in size
searchable boolean false true, false Enables drop-down to have searchable feature
multiple boolean false true, false Enables multiple selection
value any any Defines value of dropdown list
drop-up boolean false true, false Show options on top when field is near bottom of the screen
with-dynamic-option boolean false true, false Creates input field on the dropdown option
has-error boolean false true, false Specifies validation or mandatory input for the input field
error-message string "" any Defines the error message when input element is wrong

 

Events

 

EVENT OBJECT DESCRIPTION
valueChange value Returns value when an element gets user input
onOptionSelect value, keycode Emit field value and keycode on input blur event
onSubmitOption value Emit field value and keycode on input blur event

 

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.