<form action="<%= main_app.search_results_path %>" method="get" role="search" class="search">
  <label class="visually-hidden" for="search"><%= t('search_box.label') %></label>
  <input class="search__input" id="search" required type="search" name="query" value="<%= params[:query] %>"
    placeholder="<%= t('search_box.placeholder') %>" />

  <button type="reset" class="search__clear">
    <span class="icon icon--clear"></span>
    <span class="visually-hidden">clear the search field</span>
  </button>

  <button class="search__submit <%= 'search__submit--green' if search_in_page_header %>" type="submit">
    <span class="icon icon--search"></span>
    <span class="visually-hidden"><%= t('search_box.button_text') %></span>
  </button>
</form>

<form data-dough-component="ClearInput" action="<%= main_app.search_results_path %>" method="get" role="search" class="search">
  <label class="visually-hidden" for="search"><%= t('search_box.label') %></label>
  <input data-dough-clear-input class="search__input" id="search" required type="search" name="query" value="<%= params[:query] %>"
    placeholder="<%= t('search_box.placeholder') %>" />

  <button data-dough-clear-input-button type="reset" class="search__clear">
    <span class="icon icon--clear"></span>
    <span class="visually-hidden">clear the search field</span>
  </button>

  <button class="search__submit <%= 'search__submit--green' if search_in_page_header %>" type="submit">
    <span class="icon icon--search"></span>
    <span class="visually-hidden"><%= t('search_box.button_text') %></span>
  </button>
</form>

Add data-dough attributes to HTML component
Add data-dough attributes to HTML component
