Search
The search component provides a text input designed for search interactions. It supports outlined and filled variants, an optional clear button, and leading/trailing icon slots.
Usage
A search bar with a leading search icon, an input field, and an optional clear button.
<wc-search placeholder="Search..." style="width: 24rem;"></wc-search>
Use the leading slot to customise the leading icon, and the trailing slot for additional actions such as a voice or avatar button.
<wc-search placeholder="Search contacts..." style="width: 24rem;">
<wc-icon slot="leading" name="person_search"></wc-icon>
<wc-icon-button slot="trailing"><wc-icon name="mic"></wc-icon></wc-icon-button>
</wc-search>
Variants
Filled
The default variant. Uses a surface container as background, suitable for use on a plain surface.
<wc-search variant="filled" placeholder="Filled search" style="width: 24rem;"></wc-search>
Outlined
A bordered variant that works well on coloured or patterned backgrounds.
<wc-search variant="outlined" placeholder="Outlined search" style="width: 24rem;"></wc-search>
Sizes
Use the size attribute to control the height of the search bar.
<wc-search size="sm" placeholder="Small" style="width: 20rem;"></wc-search>
<wc-search size="md" placeholder="Medium (default)" style="width: 20rem;"></wc-search>
<wc-search size="lg" placeholder="Large" style="width: 20rem;"></wc-search>
States
Disabled
Add the disabled boolean attribute to prevent user interaction.
<wc-search disabled="true" placeholder="Disabled search" style="width: 24rem;"></wc-search>
Clear button
A clear button appears automatically when the input has a value. Set clearable="false" to hide it.
<wc-search value="Clear me" style="width: 24rem;"></wc-search>
<wc-search value="No clear button" .clearable="${false}" style="width: 24rem;"></wc-search>
Events
The search bar dispatches four events: input (on every keystroke), change (on blur or Enter),
search (on Enter), and clear (when the clear button is activated).
<wc-search id="events-search" placeholder="Type something..." style="width: 24rem;"></wc-search>
<p id="search-event-log" class="text-body" style="min-height: 1.5rem;"></p>
<script>
const searchEl = document.querySelector('#events-search');
const log = document.querySelector('#search-event-log');
searchEl.addEventListener('input', (e) => {
log.textContent = `input: "${e.detail.value}"`;
});
searchEl.addEventListener('search', (e) => {
log.textContent = `search submitted: "${e.detail.value}"`;
});
searchEl.addEventListener('clear', () => {
log.textContent = 'clear fired';
});
</script>
On this page
Usage Variants Sizes States Events