Home
Select
Select builds on wc-field and wc-menu to provide a fully-featured dropdown picker.
- Single and multi-select modes
- Client-side typeahead with
search="contains" - Server-side typeahead with
search="managed" - Multi-select chips display
Usage
Use <wc-option> children to declare options directly in HTML.
<wc-select label="Fruit" placeholder="Pick a fruit..." style="width: 20rem">
<wc-option value>None</wc-option>
<wc-option value="apple">Apple</wc-option>
<wc-option value="banana">Banana</wc-option>
<wc-option value="cherry">Cherry</wc-option>
<wc-option value="dragonfruit">Dragonfruit</wc-option>
<wc-option value="elderberry">Elderberry</wc-option>
</wc-select>
Options can include a Material Symbol icon via the icon attribute.
<wc-select label="Action" placeholder="Choose an action..." style="width: 20rem">
<wc-option value>None</wc-option>
<wc-option value="new" icon="add">New file</wc-option>
<wc-option value="save" icon="save">Save</wc-option>
<wc-option value="delete" icon="delete">Delete</wc-option>
</wc-select>
Alternatively, set the options property programmatically when options are
determined at runtime.
<wc-select id="basic-select" label="Fruit" placeholder="Pick a fruit..." variant="outlined" style="width: 20rem"></wc-select>
<script>
const sel = document.getElementById('basic-select');
sel.options = [
{ label: 'None', value: '' },
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Cherry', value: 'cherry' },
];
sel.addEventListener('change', function (evt) {
console.log('change', evt.detail);
});
</script>
Search / Typeahead
Use search="contains" for client-side typeahead filtering.
<wc-select label="Action" placeholder="Type to filter..." search="contains" style="width: 20rem">
<wc-option value>None</wc-option>
<wc-option value="new" icon="add">New file</wc-option>
<wc-option value="save" icon="save">Save</wc-option>
<wc-option value="save-as">Save As</wc-option>
<wc-option value="nadine">Nadine Brooks</wc-option>
<wc-option value="laura">Laura Ballard</wc-option>
<wc-option value="jack">Jack Thompson</wc-option>
</wc-select>
Managed Search
Use search="managed" for server-side filtering. The component emits a
select-search event with the current query so you can load options asynchronously.
<wc-select id="managed-select" label="User" placeholder="Type to search users..." search="managed" style="width: 20rem"></wc-select>
<script>
const managedSel = document.getElementById('managed-select');
let counter = 1;
managedSel.options = [];
managedSel.addEventListener('select-search', function (evt) {
const query = evt.detail.value;
// Simulate an async server call
setTimeout(function () {
managedSel.options = [
{ label: 'None', value: '' },
...Array.from({ length: 5 }, function (_, i) {
return { label: `${query} result ${counter + i}`, value: String(counter + i) };
}),
];
counter += 5;
}, 300);
});
managedSel.addEventListener('change', function (evt) {
console.log('change', evt.detail);
});
</script>
Multi Select
Add the multiple attribute to enable multi-select. Selected options are shown as
dismissible chips inside the field.
<wc-select label="Fruits" placeholder="Pick fruits..." multiple="true" style="width: 24rem">
<wc-option value="apple">Apple</wc-option>
<wc-option value="banana">Banana</wc-option>
<wc-option value="cherry">Cherry</wc-option>
<wc-option value="dragonfruit">Dragonfruit</wc-option>
<wc-option value="elderberry">Elderberry</wc-option>
</wc-select>
Multi-select also works with typeahead (search="contains").
<wc-select label="Tags" placeholder="Search and pick tags..." multiple="true" search="contains" style="width: 24rem">
<wc-option value="js">JavaScript</wc-option>
<wc-option value="ts">TypeScript</wc-option>
<wc-option value="python">Python</wc-option>
<wc-option value="rust">Rust</wc-option>
<wc-option value="go">Go</wc-option>
<wc-option value="elixir">Elixir</wc-option>
</wc-select>
On this page
Usage Search / Typeahead Managed Search Multi Select