DaisyUI Clear Input Button. Demonstrates how to add a "clear input" button to DaisyUI, with an example in Svelte. Feel free to style and modify as desired.

DaisyUI Clear Input.svelte

<label class="label" for="my-id">
  <span class="label-text">Insert your label here...</span>
</label>

<div class="input-group">
  <input
    tabindex="0"
    type="text"
    id="my-id"
    class="input input-accent border-opacity-20"
    placeholder="Your placeholder here..."
  />
  <button class="btn btn-ghost btn-circle border-accent border-opacity-20">
    <!-- Insert a backspace svg -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      stroke-width="2"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M12 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M3 12l6.414 6.414a2 2 0 001.414.586H19a2 2 0 002-2V7a2 2 0 00-2-2h-8.172a2 2 0 00-1.414.586L3 12z"
      />
    </svg>
  </button>
</div>

Svelte Example.svelte

<script lang="ts">
  let query: string = "";
  function resetLocation() {
    query = '';
  }
</script>

<label class="label" for="my-id">
  <span class="label-text">Insert your label here...</span>
</label>

<div class="input-group">
  <input
    tabindex="0"
    type="text"
    id="my-id"
    class="input input-accent border-opacity-20"
    placeholder="Your placeholder here..."
    bind:value={query}
  />
  <button class="btn btn-ghost btn-circle border-accent border-opacity-20" on:click={resetQuery}>
    <!-- Insert a backspace svg -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      stroke-width="2"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M12 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M3 12l6.414 6.414a2 2 0 001.414.586H19a2 2 0 002-2V7a2 2 0 00-2-2h-8.172a2 2 0 00-1.414.586L3 12z"
      />
    </svg>
  </button>
</div>

Demo: