Input Search

A search input with an optional clear button. The clear button appears automatically when the field has a value and disappears once cleared.

When to use

Use diwa-input-search for search fields. The clear button (×) appears automatically when the field has a value, giving users a quick way to reset the search without selecting all text.

Example

<!-- Basic search field -->
<diwa-input-search
  id="search"
  label="Search"
  placeholder="Search components…"
  show-clear-button
></diwa-input-search>

<script>
  const search = document.getElementById('search');
  search.addEventListener('input', (e) => filterResults(e.detail));
</script>

Hiding the label

In compact toolbars, set hideLabel to visually hide the label while retaining it as an accessible name via aria-label.

Clear button

The clear button is shown only when value is non-empty, disabled is false, and readonly is false. Set showClearButton={false} to suppress it entirely — for example in a filter field where clearing should be done through a separate Reset button.