Site search

A search box that allows users to search a site for a keyword or phrase.

<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.

Website analytics

Searches from search boxes are tracked as standard via analytics site search settings through the use of the q parameter.

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.