You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Site search

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

Sample HTML

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

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.


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.

Back to top