src/lib/components/fields/Input.svelte

<script lang="ts">
  export let placeholder: string = "Search";
  export let value: string = "";
  export let onChange: (value: string) => void = () => {};

  const handleChange = (event: any) => {
    const target = event.target as HTMLInputElement;
    onChange(target.value as string);
  }
</script>

<div class="bg-neutral-900 border border-neutral-800 rounded-lg px-4 py-3 text-neutral-200 text-base">
  <input
    type="text"
    {value}
    {placeholder}
    class="bg-transparent outline-none border-none placeholder:text-neutral-500 w-full"
    on:input={handleChange}
  >
</div>