Search
Search allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation.
View USWDS component for guidance
Default
Search should be easily found. For the default search version, consider displaying in the header and/or side navigation.
<form class="usa-search" role="search">
<label class="usa-sr-only" for="tkBH">Search</label>
<input class="usa-input" id="tkBH" type="search">
<button class="usa-button" type="submit">
<span class="usa-search__submit-text">Search</span>
</button>
</form>
Big variant
If searching is a primary action of the site, consider adding the big variant version to the primary hero section to reinforce that action.
<form class="usa-search usa-search--big" role="search">
<label class="usa-sr-only" for="V3Nn">Search</label>
<input class="usa-input" id="V3Nn" type="search">
<button class="usa-button" type="submit">
<span class="usa-search__submit-text">Search</span>
</button>
</form>