Site search

<div class="ds_site-search">
    <form role="search" class="ds_site-search__form">
        <label class="ds_label  visually-hidden" for="site-search">Search</label>
        <div class="ds_input__wrapper  ds_input__wrapper--has-icon">
            <input name="q" required="" id="site-search" class="ds_input  ds_site-search__input" type="search" placeholder="Search" autocomplete="off">
            <button type="submit" class="ds_button  js-site-search-button">
                <span class="visually-hidden">Search</span>
                <svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
            </button>
        </div>
    </form>
</div>

About this component

To search, users can either enter text in the search box and press return or trigger the magnifying glass icon to the right of the search box.

The site search component can be reused across a site, such as in a site’s header and on search results pages.

Why we use this component

Site search is a widely recognised component which helps users to find the content they need on a site.

Related components

• Autocomplete

Website analytics

You can track searches by the q parameter in the URL when the page loads, the search's page path and the search query.

Accessibility

While there is no visible field label, a hidden label is available to screen readers. The submit button also has hidden text for screen readers.

The form has a role attribute of search, which screen readers will announce to users.