Use gem component

app/components/search_component.html.erb

@@ -1,16 +1,17 @@
 <%= form_with model: @user, url: path(current_user), method: "get", local: true do |f| %>
-<div class="app-search govuk-!-margin-bottom-4">
+  <div class="app-search govuk-!-margin-bottom-4">
-  <div class="govuk-form-group app-search__form-group">
+    <div class="govuk-form-group app-search__form-group">
-    <label class="govuk-label govuk-!-margin-bottom-2" for="search-field">
+      <%= f.govuk_text_field :search,
-      <%= label %>
+        label: { text: search_label },
-    </label>
+        type: "search",
+        value:,
+        autocomplete: "off",
+        class: "app-search__input" %>
+    </div>
 
-    <input class="govuk-input app-search__input" id="search-field" name="search-field" type="search" autocomplete="off" value="<%= value %>">
+    <button class="govuk-button app-search__button undefined" data-module="govuk-button">
-  </div>
+      Search
-
+    </button>
-  <button class="govuk-button app-search__button undefined" data-module="govuk-button">
-    Search
-  </button>
 
-</div>
+  </div>
 <% end %>

app/components/search_component.rb

@@ -1,9 +1,9 @@
 class SearchComponent < ViewComponent::Base
-  attr_reader :current_user, :label, :value
+  attr_reader :current_user, :search_label, :value
 
-  def initialize(current_user:, label:, value: nil)
+  def initialize(current_user:, search_label:, value: nil)
     @current_user = current_user
-    @label = label
+    @search_label = search_label
     @value = value
     super
   end

app/views/users/index.html.erb

@@ -8,7 +8,7 @@
   <%= govuk_button_link_to "Invite user", new_user_path, html: { method: :get } %>
 <% end %>
 
-<%= render SearchComponent.new(current_user:, label: "Search by name or email address", value: @searched) %>
+<%= render SearchComponent.new(current_user:, search_label: "Search by name or email address", value: @searched) %>
 
 <%= govuk_table do |table| %>
   <%= table.caption(classes: %w[govuk-!-font-size-19 govuk-!-font-weight-regular]) do |caption| %>

spec/components/search_component_spec.rb

@@ -2,12 +2,12 @@ require "rails_helper"
 
 RSpec.describe SearchComponent, type: :component do
   let(:current_user) { FactoryBot.create(:user, :support) }
-  let(:label) { "Search by name or email address" }
+  let(:search_label) { "Search by name or email address" }
   let(:page) { Capybara::Node::Simple.new(rendered_component) }
   let(:value) { nil }
 
   before do
-    render_inline(described_class.new(current_user:, label:, value:))
+    render_inline(described_class.new(current_user:, search_label:, value:))
   end
 
   it "renders a search bar" do
@@ -15,7 +15,7 @@ RSpec.describe SearchComponent, type: :component do
   end
 
   it "renders the given label" do
-    expect(page).to have_content(label)
+    expect(page).to have_content(search_label)
   end
 
   context "when a search term has been entered" do