Override The Clear Button

Let's change how the clear button looks.

Override The Clear Button with an SVG

Let's change how the clear button works with an SVG.

Default Clear Button

Let's see how the default clear button works.

Custom Loading Indicator

Use the loading-indicator slot to provide a custom loading animation.

The default loading animation just uses CSS and a single `div tag, but this example uses SVG.

No options

Override what shows up if there are no options

Hidden Input

If you want to use a much select in a traditional HTML form you can use the hidden-value-input slot. If you put a hidden input in that slot, it's value will mirror that of the much-select.

You can use your browser's developer tools to see the hidden input and watch its value change as you change the much-select's value.

Hidden Input JSON encoding

If you're using the hidden-value-input and the selected-value-encoding attribute, the value in the hidden input slot will also be encoded.

You can use your browser's developer tools to see the hidden input and watch its value change as you change the much-select's value.

No Filtered Options

You can over ride the message the user sees when they have entered a search string that does not match any of the avalible options.

Add and Remove Button Slots

For the datalist output-stype in mulit select mode there are add and remove buttons next to each selected option. Those can be changed with the add-value-button-n and remove-value-button-n slots. n is the index of the selected option. Slots can only be used once so this is kind of an ugly hack. You could either add a ton of slots... or manage then dynamically... or well... there really should be a better solution.

Validation and Transformation Slot

For Multi Select and Custom Options.

Custom options should be transformed and validated.

The custom values should be turned to lower case.

It should only allow custom options that have no white space and are at least 3 characters long.

Custom Element Options

For more flexibility in the dropdown items you can use the much-select-option custom element.