Selects

Basic

one

two

three

four

five

six

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
  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.

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