An initial value

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

An initial Value (No Options)

If there is an initial value but no options it should create one for the initial value

An Initial (Selected) Value (No Options)

Then Add the Options

But not the selected value

If there is an initial value but no options initially, then we add options, it should keep the selected value including the additional options in the dropdown.

An initial Value (No Options) - Then Add the Options

If there is an initial value but no options initially, then we add options (async).

It should keep the selected value and "merge" the new option with the same value.

open example on its own page

2 Initial (Selected) Options

Then Add More Options

But not the selected value

For multi select we should support multiple initial values, then we add options (async).

It should keep the selected values and add the new options.

open example on its own page

Switch between multi select and single select

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

open example on its own page

Async Loading Options

In this example we start with a single selected value, then asynchronously load in a bunch more options (after 10 seconds).

The description for the selected gets loaded in with all async options.

Async Loading Options (Smaller)

In this example we start with a single selected value, then asynchronously load in a bunch more options (after 10 seconds).

The description for the selected gets loaded in with all async options.

This smaller version exists because sometimes it's easier to see what's going on if there are only a few options.

Async Loading Options with Multi Select (Smaller)

In this example we start with a single selected value, then asynchronously load in more options (after 2 seconds).

The description for the selected option gets loaded in with all async options.