Search Form – Design Portal

A search box acts as the field for a query input or search term from the user to search and retrieve related information from the database.

Demo

<form method="get" class="search-form" role="search" action="/" title="Type and Press Enter to search." style="grid-area: auto">
  <label class="search-form__label screen-reader-text" for="search">Search the site</label>
  <input type="search" class="search-form__text-input search-form__text-input--site" name="s" id="search-site" placeholder="Search Site...">
  <button class="search-form__search-button" type="submit" aria-label="Search site"></button>
</form>

.search-form {
  position: relative;

  &__search-button {
    @extend %button-reset;
    background: url(#{$assetPath}/search-icon.svg) no-repeat center;
    block-size: 1.5rem;
    inline-size: 1.5rem;
    inset-block-start: 1rem;
    inset-inline-end: 0.75rem;
    position: absolute;
  }

  &__text-input {
    appearance: none;
    border: .0625rem solid var(--light-gray-1);
    inline-size: 100%;
    padding: 1.05rem 1rem;

    &:focus, &:active, &:focus-visible {
      outline: none;
      border: 1px solid var(--primary);
      border-radius: 0
    }

    &::placeholder {
      color: #939393;
      font-style: italic;
    }
  }
}

No JS! 😀

Note

In most themes, the search form is located within the popout menu, but it can also be located within the hero, like on info.com or LegalBoulevard.

States & Variations

Default

The standard search form.

<form method="get" class="search-form" role="search" action="/" title="Type and Press Enter to search." style="grid-area: auto">
  <label class="search-form__label screen-reader-text" for="search">Search the site</label>
  <input type="search" class="search-form__text-input search-form__text-input--site" name="s" id="search-site" placeholder="Search Site...">
  <button class="search-form__search-button" type="submit" aria-label="Search site"></button>
</form>

Popout Search Switcher

The search form located in the popout menu.

<div class="search-switcher">
  <!--Site Search-->
  <form method="get" class="search-switcher__form search-switcher__form--site" role="search" action="/" title="Type and Press Enter to search.">
    <label class="search-switcher__label screen-reader-text" for="search">Search the site</label>
    <input type="search" class="search-switcher__text-input search-switcher__text-input--site" name="s" id="search-site" placeholder="Search Site...">
    <button class="search-switcher__search-button" type="submit" aria-label="Search Site"></button>
  </form>
  <!--Web Search-->
  <form method="get" class="search-switcher__form search-switcher__form--web" role="search" action="https://search.walletgenius.com/serp" title="Type and Press Enter to search.">
    <label class="search-switcher__label screen-reader-text search-switcher__text-input--web" for="search">Search the web</label>
    <input type="search" class="search-switcher__text-input" name="q" id="search-web" placeholder="Search Web...">
    <button class="search-switcher__search-button" type="submit" aria-label="Search Site"></button>
  </form>
  <div class="search-switcher__button-group">
      <button class="search-switcher__button search-switcher__button--site search-switcher__button--active " type="button">Site Search</button>
      <button class="search-switcher__button search-switcher__button--web" type="button">Web Search</button>
  </div>
</div>

Anatomy

Search Form / Text Input
Search Switcher Form / Text Input
Search Form Placeholder
Search Button
Site Search Button
Web Search Button