Input with Icon

<!--
  A search field with a magnifier in it still needs a real <label>. The design
  has no room for one, so it is visually hidden rather than dropped: the icon is
  aria-hidden decoration and the placeholder disappears on the first keystroke,
  which would leave the field with no accessible name at all.

  The clear button is a real <button> with its own name, not a click handler on
  a <span> - it has to be reachable by Tab and Enter like any other action.
-->
<div class="icon-field">
  <label class="icon-field__label" for="icon-field-search">Search components</label>
  <div class="icon-field__box">
    <svg class="icon-field__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
    <input
      class="icon-field__input"
      id="icon-field-search"
      name="q"
      type="search"
      placeholder="Search components"
      value="gradient"
    />
    <button class="icon-field__clear" type="button" aria-label="Clear search">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
        <path d="M18 6 6 18M6 6l12 12" />
      </svg>
    </button>
  </div>
</div>

<script>
  document.querySelectorAll('.icon-field').forEach(function (root) {
    var input = root.querySelector('.icon-field__input');
    var clear = root.querySelector('.icon-field__clear');

    // The clear button only exists when there is something to clear - an
    // always-visible X on an empty field is a control that does nothing.
    function sync() {
      clear.hidden = input.value.length === 0;
    }

    input.addEventListener('input', sync);
    clear.addEventListener('click', function () {
      input.value = '';
      sync();
      input.focus();
    });

    sync();
  });
</script>