The minimum search string length

Using the search-string-minimum-length attribute sets the number of characters that the user needs to type in the #input-filter before the much-select begins to filter the search results.

The default value is 1. Meaning you have to type in at least 1 character before it will start filtering.

Add Custom Options

Using the allow-custom-options attribute to allow the user to choose a "new" value (one that is not in the list of options).


Event Details

An initial value

Set using the selected-value attribute on the <much-select>


Disable the <much-select> with the disabled attribute.

Events Only Mode

The events-only="" attribute is a little specialized, it is for when you are in a situation where something else really wants to have full control over the DOM. Elm would an example of this. In this case, we only want the much-select element to emmit events and leave it up to "something else" to managed its attributes.


Show and hide the loading indicator with the loading="" attribute.

Maximum Number of Dropdown Items

You can change the maximum number of items in the dropdown with the max-dropdown-items= attribute.

In this case it's set to 3, you can get to the remaining options by move your selection up and down with the arrow keys for filtering the options. To demonstrate why you might want to use this option we also have the following attributes set: search-string-minimum-length="0" show-dropdown-footer="".

Selected Items Goes to the Top

Adding the selected-option-goes-to-top attribute will change the behavior so selected items get put at the top of the dropdown menue.

Switch between multi select and single select

Adding the multi-select attribute puts the much-select into multi select mode.

Switch between datalist and custom html Output Style

open example on its own page

A Placeholder

Removable Options

With multi select you can make each selected value individually removable.

open example on its own page