Search

Search

The search component is a small form with a textfield and a search button used to trigger the search function of a website.

When to use this component

Use the search component on websites that have a search function to offer search functionality on any web page where it is wanted.

When not to use this component

Do not use the search component on websites that don’t have a search function.

How it works

The search component is a small form with:

  • A textfield where the user can enter one or more search keywords.
  • A search button, which is the submit buttom of the form.

When clicking the search button, the search function of the website is triggerd. Typically, the user is brought to a search results page.

Usage within the style guide

The search component is used in the header component. Here, as an exception, the textfield has a placeholder instead of label, because in the header component, a label is not possible.

<form class="form search">
  {% if label %}
    {% include '@label' with {
    "label": label,
    "for": for,
    "label_optional": label_optional
    } %}
  {% endif %}
  {% include '@input' with {
  'type': 'search',
  'placeholder': placeholder,
  'modifier': modifier_search,
  'id': search_id,
  'name': search_id,
  'required': true
  } %}
  {% include '@input-submit' with {
  'value': text,
  'modifier': modifier_submit
  } %}
</form>
<form class="form search">
    <label for="header-search">What are you looking for?
    </label>
    <input type="search" id="header-search" name="header-search" class="search inline" required="true" />

    <input type="submit" value="Submit" class="" />
</form>
{
  "label": "What are you looking for?",
  "for": "header-search",
  "label_optional": null,
  "placeholder": null,
  "modifier_search": "inline",
  "text": "Submit",
  "search_id": "header-search",
  "search_name": "header-search"
}
  • Content:
    .search {
      display: flex;
      position: relative;
      flex-wrap: wrap;
      align-items: center;
    
      label {
        @extend %h3;
    
        width: 100%;
        max-width: 100%;
      }
    
      input {
        margin-bottom: .5rem;
    
        &:not([type="submit"]) {
          flex: 1 1 $bp-mobile;
          margin-right: .4rem;
        }
      }
    
      input[type="search"] {
        @extend %search-input;
      }
    
      input[type="submit"] {
        @include button-large;
        margin-right: 0;
      }
    }
    
    %search-input {
      padding-left: 2.4rem;
    
      &,
      &:focus {
        background: svg-as-background('search', color('cyan-wcag'), 32, 32) no-repeat left .4rem center;
      }
    }
    
  • URL: /components/raw/search/_search.scss
  • Filesystem Path: components/31-molecules/search/_search.scss
  • Size: 597 Bytes