Site search

<div class="ds_site-search  ds_site-search--collapsible" data-module="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 commonly recognised component which allows users to quickly find the content they need on a site.

Related components

• Autocomplete

Website analytics

Tracking of a search is triggered by the q parameter in the URL when the page loads, and can be analysed with the search's page path and the search query.

Accessibility

The form field and magnifying glass button both include a text label that is hidden from visual browsers but that will be available for screen readers.

The form has a role attribute of search.