Basic
<mc-select label=Label placeholder=Placeholder...>
<mc-option value=1>one</mc-option>
<mc-option value=2>two</mc-option>
</mc-select>
<mc-select filter label=Filter>
<mc-icon slot=leading-icon>search</mc-icon>
<mc-option value=1>one</mc-option>
<mc-option value=2>two</mc-option>
</mc-select>
<mc-select label="Value attr" value=1>
<mc-option value=1>one</mc-option>
<mc-option value=2>two</mc-option>
</mc-select>
<mc-select label="Selected attr (outlined)" class=outlined>
<mc-option selected value=1>one</mc-option>
<mc-option value=2>two</mc-option>
</mc-select>
Filter
Filtering hides items that do not fuzzy match the input. The most likely match will also add a textfield suggestion and hitting the enter key will select it.
<mc-select filter label=Label>
<mc-option value=1>one</mc-option>
<mc-option value=2>two</mc-option>
<mc-option value=3>three</mc-option>
<mc-option value=4>four</mc-option>
<mc-option value=5>five</mc-option>
<mc-option value=6>six</mc-option>
<mc-option value=7>seven</mc-option>
<mc-option value=8>eight</mc-option>
<mc-option value=9>nine</mc-option>
<mc-option value=10>ten</mc-option>
</mc-select>
Async filter
Async filter will trigger a filter event that is debounced. There will be a progress bar shown at the top. You can resolve the select two ways. You can update the options or reset the options (both shown below).
<mc-select async filter id=async-filter-select label=Label>
<mc-option value=1>one</mc-option>
<mc-option value=2>two</mc-option>
<mc-option value=3>three</mc-option>
<mc-option value=4>four</mc-option>
<mc-option value=5>five</mc-option>
<mc-option value=6>six</mc-option>
<mc-option value=7>seven</mc-option>
<mc-option value=8>eight</mc-option>
<mc-option value=9>nine</mc-option>
<mc-option value=10>ten</mc-option>
</mc-select>
// do some async stuff
const select = document.querySelector('#async-filter-select');
// Incremental search is enabled
// You will receive debounced events as you type
select.addEventListener('search', e => {
console.log(select.displayValue); // what is being typed
// You can reset the select to the initial options
select.initialOptions();
// You can either append new mc-option elements to the DOM
// Or you can use this helper method
select.setOptions([
{ label: 'One', value: 1 },
{ label: 'Two', value: 2}
]);
});
Style
CSS variables that allow you override default values
/* Optional variables for overriding */
--mc-select-container-color: var(--mc-surface-container);
--mc-select-shape: var(--mc-shape-extra-small);
--mc-select-item-text-color-local: var(--mc-on-surface);
--mc-select-selected-container-color-local: var(--mc-secondary-container);
--mc-select-selected-text-color-local: var(--mc-on-secondary-container);