Skip to main content

Search

Information: Documentation incomplete

This component still requires documentation.

Use the search component to allow users to find relevant content by entering words or phrases.

Examples

Default

Open example in a new window
View HTML 
<form class="uhb-c-search" action="/">
  <label class="uhb-u-visually-hidden" for="search-input">Search the UHB website</label>
  <input class="uhb-c-search__input" id="search-input" autocomplete="off" name="search" placeholder="Search" type="search">
  <button class="uhb-c-search__submit uhb-c-button uhb-c-button--action" type="submit">
    <svg class="uhb-c-icon uhb-c-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"> 
      <path d="M16.96 14.12 22 19.16 19.16 22l-5.04-5.04a8.04 8.04 0 1 1 2.84-2.84Zm-4.09-1.26a4 4 0 0 0-2.85-6.85 4.02 4.02 0 1 0 2.84 6.86h.01Z" />
    </svg>
    <span class="uhb-u-visually-hidden">Search</span>
  </button>
</form>