Back to the pattern library

Search

Make the length of the text input box appropriate for the amount of information needed: do not make it frustratingly short or intimidatingly long.

Example

Example

HTML

<form class="coop-c-search">
    <label for="search" class="visuallyhidden">Search the design system</label>

    <input type="search" name="search" id="search" placeholder="Search the design system" class="coop-c-search__input">
    <button class="coop-c-search__button">
        <span class="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="#282828" fill-rule="evenodd"/></svg>
    </button>
</form>

SCSS

To use this component in your service add this import in your main SCSS file:

@import 'node_modules/@coopdigital/coop-frontend-components/forms/search/_search.scss';

Customise this component by following the guide here.

JS

Design and content

Labels are set:

  • in Avenir medium at 24px
  • with a bottom margin of 8px

Text inputs:

  • have a 1px solid border in #6E6E6E
  • have a 1px solid border in #00A1CC when focussed
  • are padded top and bottom 12px and left and right 8px
  • user entered test is 20px Avenir regular in #282828

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change