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="#282828" fill-rule="evenodd"/></svg>
    </button>
</form>

                            

CSS

                            .coop-c-search {
  position: relative;
}

.coop-c-search__input {
  box-sizing: border-box;
  padding: 15px;
  border-color: $grey-mid;
}

.coop-c-search__input:hover,
.coop-c-search__input:focus {
  border-color: $grey-dark;
}

.coop-c-search__input:focus {
  transition: none;
  outline: 2px dotted $link-focus;
  outline-offset: 3px;
}

@media (min-width: 750px) {
  .coop-c-search__input {
    padding: 20px;
  }
}

.coop-c-search__button {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  padding: 0 15px;
  margin-bottom: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.coop-c-search__button:focus {
  transition: none;
  outline: 2px dotted $link-focus;
  outline-offset: 3px;
}

.coop-c-search__button svg {
  position: relative;
  top: 4px;
}

                            

Suggest a pattern or change

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

Suggest a new pattern or a change