<much-select>

Simple Example

Just selecting a single value from a list. If this is all you need to do you should probably just use a select element.

Bricks Sticks Straw

Multi Select

Choose some programming languages, no need to just pick 1.

Ada ALGOL 68 C C++ Objective-C C# Java Go

Option Groups

You can give your options a little more organization by grouping them.

Red Yellow Blue Orange Green Purple

Options with Descriptions

Sometimes just a human friendly label for an option isn't enough, and you'd like to add a little extra "color".

You can filter your results by typing, <much-select> will also use the descriptions when trying to find the option you want.

Red Yellow Blue Orange Green Purple

Options Label and Values

The labels and values are different

🐒 🌳 🐼 🐞 🦋 🐇

An initial value

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

Red Yellow Blue Orange Green Purple

A Placeholder

Red Yellow Blue Orange Green Purple

Disabled

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

Red Yellow Blue Orange Green Purple

Loading

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

Red Yellow Blue Orange Green Purple Toggle loading attribute

Disabled Options

This has the "yellow" and "orange" options disabled.

Red Yellow Blue Orange Green Purple

Change Options With the Dom

Click me to change the dom These are the Replace

Remote API

As you type we'll query the remote API for additional options.

This dropdown searches the Rick and Morty API for characters from the show by name.

Custom Options That Persist

Bánh mì Cheese steak Po' boy

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.

Eastern Central Mountain Western

Output Style - Datalist

Red Yellow Blue Orange Green Purple