Select Extended

With this component, you can create a select element, that contains a search input and could contain images or icons before the option labels.

You only need to create a standard HTML select, like the select below, and add the modifier select--extended.

<select class="select select--extended">
  <option class="select__option" value="">none</option>
  <option class="select__option" value="1">Item 1</option>
  <option class="select__option" value="2">Item 2</option>
</select>

We also support select disable state and grouped selects.

Images

If you want to add images before the option texts, you must add data-sg-image data attributes to the options.

Icons/Flags

If you want to add images before the option texts, you must add data-sg-icon data attributes to the options.

Event Handling

If you want to listen on the select changes, or submit the form around the select, you only need to listen to your created HTML <select>. The extended select will change the values of the original select and only change their visibility.

The script will not listen to later changes on the original select. So if you want to change the extended selects options, you must destroy the complete extended selects with your select and rebuild the select and add them new to the DOM.

The extended select listen on the original select, if their is an JS triggered value change (please remember, that select.value = "some value" not trigger the change event. You must call it manually with select.dispatchEvent(new Event('change'))).