Skip to main content
Hennepin County Design System

Search

The search feature lets users find specific information within a website. They can use search as an alternative to navigation. Or they may need to use it if they get stuck in the navigation.

Search uses metadata to filter content for the user. Search then presents results to the user that are relevant to their search query.

HTML

<div class="hc-form-group">


      <!-- This search form is currently for display purposes only and does not perform a search operation  -->
      <!-- The action attribute is intentionally left blank.  -->
      <!-- Implement the search functionality as needed. -->
      <form action="" method="get">
        <div class="hc-search-wrapper">
          <input
            type="search"
            class="hc-input hc-input-search"
            id="search"
            name="search"
            spellcheck="true"
            aria-label="Search the site"
          />
          <button 
            class="hc-button hc-button--icon-left hc-button-search" 
            aria-label="Search"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="hc-icon-size--regular"
              viewBox="0 -960 960 960"
              aria-hidden="true"
              focusable="false"
            >
              <path
                d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"
              />
            </svg>
            Search
          </button>
        </div>
      </form>
      
    </div>
A PrimeNG search component example.

Import

Label

When to use

  • Use for large sites that have a variety of content.
  • Use for sites that have a navigation structure that is complex or hierarchical.

When not to use

  • Don’t use a search component on small sites with minimal content. Instead, rely on navigation.
Open all

  • Ensure users can access and operate search using only keyboard controls.
  • Have a high color contrast between the search bar and the background.
  • Include extra guidance with aria-describedby for screen readers when using predictive text.

  • Place the search bar in the upper right corner. This lets users identify it for quick access.
  • Make search responsive across devices and screen sizes.
  • Give clear and helpful feedback when search fails to provide useful results. Avoid jargon like "404 page not found." Instead use a kind message that doesn’t blame the user.
  • Use predictive text or suggestions when possible. This will help users refine their search queries.

Open all