Dummy
x
1
2
3
4
5
6
7
<form class="usa-search" role="search" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="IAsNy-_jUduwvuqtl5fGiDqkegYk8J3g33W-WguLnGw7eyhjk29FAtKD7xsevQa0E0KEBkOr9UYMaP-4_clWsg" autocomplete="off" /><label class='usa-sr-only' for='query_field_id_kb4'>Search</label>
  <input class='usa-input' id='query_field_id_kb4' name='q' type='search' value=''>
  <button class='usa-button' type='submit'>
    <span class='usa-search__submit-text'>Search</span>
    <img alt='Search' class='usa-search__submit-icon' src='https://cdn.jsdelivr.net/npm/uswds@2.13.0/src/img/usa-icons-bg/search--white.svg'>
  </button>
</form>
1
2
3
4
5
render UswdsComponents::SearchComponent.new(
  size: size,
  form_options: { url: '#' },
  submit_icon: 'https://cdn.jsdelivr.net/npm/uswds@2.13.0/src/img/usa-icons-bg/search--white.svg',
)

Search Component

See at USWDS

Param Description Input

—