Search

Search allows a person to enter a word or a phrase to find relevant pieces of content without the use of navigation.

Example

Example

HTML

                                    
<form class="coop-c-search coop-form">
    <label for="search-large" class="coop-u-visuallyhidden">Search [website name]</label>
    <input type="search" name="search" id="search-large" placeholder="Search [website name]" class="coop-form__input coop-c-search__input">
    <button class="coop-c-search__button coop-btn">
        <span class="coop-u-visuallyhidden">Search</span>
        <svg width="32" height="32" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 11h-.8l-.3-.3c1-1.1 1.6-2.6 1.6-4.2C13 2.9 10.1 0 6.5 0S0 2.9 0 6.5 2.9 13 6.5 13c1.6 0 3.1-.6 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0C4 11 2 9 2 6.5S4 2 6.5 2 11 4 11 6.5 9 11 6.5 11z" fill="#FFFFFF" fill-rule="evenodd"/></svg>
    </button>
</form>

<form class="coop-c-search">
    <label for="search-small" class="coop-u-visuallyhidden">Search [website name]</label>
    <input type="search" name="search" id="search-small" placeholder="Search [website name]" class="coop-form__input coop-c-search__input coop-c-search__input--small">
    <button class="coop-c-search__button coop-c-search__button--small coop-btn">
        <span class="coop-u-visuallyhidden">Search</span>
        <svg width="32" height="32" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 11h-.8l-.3-.3c1-1.1 1.6-2.6 1.6-4.2C13 2.9 10.1 0 6.5 0S0 2.9 0 6.5 2.9 13 6.5 13c1.6 0 3.1-.6 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0C4 11 2 9 2 6.5S4 2 6.5 2 11 4 11 6.5 9 11 6.5 11z" fill="#FFFFFF" fill-rule="evenodd"/></svg>
    </button>
</form>


                                    

Design and content

This component can be used at 2 different heights:

  • 60px
  • 44px

The colour of the button can also be changed to a primary button if the search action is key to the user journey.

Ensure the hidden text on the form label and button is used as this is read out to screen reader users.

The placeholder text should say ‘Search’. You can change this but make sure that the text is not cut off on smaller screen sizes.

The width of the search component is set by using our layout classes. The search will stretch to fit its container. Make sure it is not:

  • too wide as a user who zooms their screen might not be able to find the search button
  • too small as a user may struggle to fill in their search query