Selects

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