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. If your application needs a search feature, consider using the standard header component (coming soon).

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-search-wrapper">
	<svg xmlns="http://www.w3.org/2000/svg" class="hc-icon-size--regular hc-search-icon" 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"></path>
	</svg>
	<label class="hc-visually-hidden" for="search">Search</label>
	<input type="search" class="hc-input hc-input-search" id="search" spellcheck="true" placeholder="Find services, programs, and more..." />
	<button class="hc-button hc-button-search" aria-label="Search" type="submit">
		Search
	</button>
</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.
  • Include extra guidance with aria-describedby for screen readers when using predictive text.

If adding the search component to your digital product, follow these guidelines.

  • 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