Maybe/app/views/transactions/searches/_form.html.erb

<%= form_with url: transactions_path,
              id: "transactions-search",
              scope: :q,
              method: :get,
              data: { controller: "auto-submit-form" } do |form| %>
  <div class="flex gap-2 mb-4">
    <div class="grow">
      <div class="relative flex items-center bg-white border border-alpha-black-200 rounded-lg focus-within:border-alpha-black-500">
        <%= form.text_field :search,
                            placeholder: "Search transactions by name",
                            value: @q[:search],
                            class: "placeholder:text-sm placeholder:text-gray-500 relative pl-10 w-full border-none rounded-lg focus:outline-none focus:ring-0",
                            "data-auto-submit-form-target": "auto" %>
        <%= lucide_icon("search", class: "w-5 h-5 text-gray-500 ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
      </div>
    </div>
    <div data-controller="menu" class="relative">
      <button id="transaction-filters-button" data-menu-target="button" type="button" class="border border-gray-200 block h-full rounded-lg flex items-center gap-2 px-4">
        <%= lucide_icon("list-filter", class: "w-5 h-5 text-gray-500") %>
        <p class="text-sm font-medium text-gray-900">Filter</p>
      </button>

      <%= render "transactions/searches/menu", form: form %>
    </div>
  </div>
<% end %>