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="kRYnGCz-tKsXj7h0WHclDMkYCotLOOi46uQkOz20N7LRhdYPkg7ZQUBs4teS7RVdElEiuzHhJJaZfPfJC5EJ-A" autocomplete="off" /><label class='usa-sr-only' for='query_field_id_jpg'>Search</label>
  <input class='usa-input' id='query_field_id_jpg' 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

—