Search with Clear

<div class="nuda-srchclear">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="11" cy="11" r="7" />
    <path d="m21 21-4.3-4.3" />
  </svg>
  <input type="search" />
  <button aria-label="Clear">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M18 6L6 18M6 6l12 12" />
    </svg>
  </button>
</div>

const root = document.querySelector('.nuda-srchclear');
const input = root.querySelector('input');
const clear = root.querySelector('button');

input.addEventListener('input', () => {
  root.classList.toggle('has-value', input.value.length > 0);
});

clear.addEventListener('click', () => {
  input.value = '';
  input.focus();
  root.classList.remove('has-value');
});

.nuda-srchclear button {
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.5) rotate(-180deg);
  transition:
    opacity 0.25s,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s,
    color 0.2s;
}

.nuda-srchclear.has-value button {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.nuda-srchclear button:hover {
  background: #ff5e7a;
  color: #09090b;
}