We're currently working on the future of the Design system at Co-op

We'll start talking about this publicly as soon as we can. In the meantime this site will remain up to date with our current design patterns.

Search beta

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="coop-u-visuallyhidden">Search the [describe what the user will be searching]</label>
    <input type="search" name="search" id="search" placeholder="Search the design system" class="coop-form__input coop-c-search__input">
    <button class="coop-c-search__button">
        <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>