NJ Web Design System (v1.0.0)

Search: Default 

<section aria-label="Default search component">
    <h2>Default</h2>

    <form class="usa-search" role="search">
        <label class="usa-sr-only" for="search-field">Search</label>
        <input class="usa-input" id="search-field" type="search" name="search">
        <button class="usa-button" type="submit">
            <span class="usa-search__submit-text">Search</span>
        </button>
    </form>
</section>

<section aria-label="Big search component">
    <h2>Big</h2>

    <form class="usa-search usa-search--big" role="search">
        <label class="usa-sr-only" for="search-field-big">Search</label>
        <input class="usa-input" id="search-field-big" type="search" name="search">
        <button class="usa-button" type="submit">
            <span class="usa-search__submit-text">Search</span>
        </button>
    </form>
</section>

<section aria-label="Small search component">
    <h2>Small</h2>

    <form class="usa-search usa-search--small" role="search">
        <label class="usa-sr-only" for="search-field-small">Search</label>
        <input class="usa-input" id="search-field-small" type="search" name="search">
        <button class="usa-button" type="submit">
            <img src="../../dist/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" />
        </button>
    </form>
</section>

No notes defined.

<section aria-label="Default search component">
  <h2>Default</h2>

  <form class="usa-search" role="search">
    <label class="usa-sr-only" for="search-field">Search</label>
    <input class="usa-input" id="search-field" type="search" name="search">
    <button class="usa-button" type="submit">
      <span class="usa-search__submit-text">Search</span>
    </button>
  </form>
</section>

<section aria-label="Big search component">
  <h2>Big</h2>

  <form class="usa-search usa-search--big" role="search">
    <label class="usa-sr-only" for="search-field-big">Search</label>
    <input class="usa-input" id="search-field-big" type="search" name="search">
    <button class="usa-button" type="submit">
      <span class="usa-search__submit-text">Search</span>
    </button>
  </form>
</section>

<section aria-label="Small search component">
  <h2>Small</h2>

  <form class="usa-search usa-search--small" role="search">
    <label class="usa-sr-only" for="search-field-small">Search</label>
    <input class="usa-input" id="search-field-small" type="search" name="search">
    <button class="usa-button" type="submit">
      <img
        src="{{ uswds.path }}/img/usa-icons-bg/search--white.svg"
        class="usa-search__submit-icon"
        alt="Search" />
    </button>
  </form>
</section>
 
package:
  name: null
  version: 1.0.0
uswds:
  path: ../../dist