Skip to content

role searchbox

Search field draft v0.1.0

Lets people type what they are looking for.

A search field collects a search term: a query for a whole site, a filter for a list. It is a Text field with a search glyph at its start, exposed to assistive technology as a search box, and whose clear control the platform provides. It has a visible label, which may be the only word next to it (Search), and an optional description; it has no error state: a search that finds nothing is reported by the results, not by the field.

Playground

HTML 
<div class="ds-search-field" data-size="medium">
  <label
    class="ds-search-field__label"
    data-part="label"
    for="ds-search-field-19"
  >Search</label>
  <div class="ds-search-field__field" data-part="field">
    <span
      class="ds-search-field__icon"
      data-part="icon"
      aria-hidden="true"
    >search</span>
    <input
      type="search"
      class="ds-search-field__control"
      data-part="control"
      id="ds-search-field-19"
      placeholder="Search projects"
    >
  </div>
</div>