Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons
Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets
Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities
home apps Buttons palette Two
Materially
github-circle-black-transparent

Selects

Selects are menus that are assigned to a text field. you can use the text field to filter
Material Design Guidelines: Select

Basic

one two three four five six search one two three four five six
one two three four five six one two three four five six
<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.
one two three four five six seven eight nine ten
<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).
one two three four five six seven eight nine ten
<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);
            
menu home apps Get started