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 label="Filter" 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 value="1" selected>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 filter async label="Label" id="async-filter-select"> <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);