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);