Search field

A search field is used to initiate searches in smaller or larger parts of a system. For example, it can be used in combination with a grid, a list, in a help window or in a top menu for searching through the whole service. Read more about search fields in the UX Guidelines. Also see autocomplete to learn more about common search behaviour.

Use when

You are searching for something, rather than selecting something from a limited set.
A search with one string is enough.

Default

The default version of this search fields has grey outline - with and without button.

Example
HTML

<form class="row" action="#" onsubmit="return false;">
    <div class="col-md-6">
        <div class="form-group search-group">
            <label class="sr-only" for="form_control_ex1">Search</label>
            <input id="form_control_ex1" class="form-control" aria-label="searchBlock" type="text" placeholder="Search...">
            <span class="search-icon">Search icon</span>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group search-group search-group-button">
            <label class="sr-only" for="form_control_ex2">Search</label>
            <input id="form_control_ex2" class="form-control" aria-label="searchBlock" type="text" placeholder="Search...">
            <button type="submit" class="btn search-icon" tabindex="-1">Search</button>
        </div>
    </div>
</form>

Options

Primary

The primary version has green outline with and without button. For the primary version, add an additional class .search-group-primary.

Example
HTML

<form class="row" action="#" onsubmit="return false;">
    <div class="col-md-6">
        <div class="form-group search-group search-group-primary">
            <label class="sr-only" for="form_control_ex3">Search</label>
            <input id="form_control_ex3" class="form-control" aria-label="searchBlock" type="text" placeholder="Search...">
            <span class="search-icon">Search icon</span>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group search-group search-group-primary search-group-button">
            <label class="sr-only" for="form_control_ex4">Search</label>
            <input id="form_control_ex4" class="form-control" aria-label="searchBlock" type="text" placeholder="Search...">
            <button type="submit" class="btn search-icon" tabindex="-1">Search</button>
        </div>
    </div>
</form>

Sizes

If you need a larger search field simply add .search-group-lg class like in the example below.

Example
HTML

<form class="row" action="#" onsubmit="return false;">
    <div class="col-md-6">
        <div class="form-group search-group search-group-lg">
            <label class="sr-only" for="form_control_ex5">Search</label>
            <input id="form_control_ex5" class="form-control" type="text" placeholder="Search...">
            <span class="search-icon">Search icon</span>
            <!-- <span class="clear-search"></span> -->
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group search-group search-group-button search-group-lg">
            <label class="sr-only" for="form_control_ex6">Search</label>
            <input id="form_control_ex6" class="form-control" type="text" placeholder="Search...">
            <button type="submit" class="btn search-icon" tabindex="-1">Search</button>
            <!-- <span class="clear-search"></span> -->
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group search-group search-group-primary search-group-lg">
            <label class="sr-only" for="form_control_ex7">Search</label>
            <input id="form_control_ex7" class="form-control" type="text" placeholder="Search...">
            <span class="search-icon">Search icon</span>
            <!-- <span class="clear-search"></span> -->
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group search-group search-group-primary search-group-button search-group-lg">
            <label class="sr-only" for="form_control_ex8">Search</label>
            <input id="form_control_ex8" class="form-control" type="text" placeholder="Search...">
            <button type="submit" class="btn search-icon" tabindex="-1">Search</button>
            <!-- <span class="clear-search"></span> -->
        </div>
    </div>
</form>

<form class="row" action="#" onsubmit="return false;">
    <div class="col-md-6">
        <div class="form-group search-group search-group-lg">
            <label class="sr-only" for="form_control_ex9">Search</label>
            <input id="form_control_ex9" class="form-control" type="search" disabled placeholder="Search...">
            <span class="search-icon">Search icon</span>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group search-group search-group-button search-group-lg">
            <label class="sr-only" for="form_control_ex10">Search</label>
            <input id="form_control_ex10" class="form-control" type="search" disabled placeholder="Search...">
            <button type="submit" class="btn search-icon" tabindex="-1" aria-disabled="true">Search</button>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group search-group search-group-primary search-group-lg">
            <label class="sr-only" for="form_control_ex11">Search</label>
            <input id="form_control_ex11" class="form-control" type="search" disabled placeholder="Search...">
            <span class="search-icon">Search icon</span>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group search-group search-group-primary search-group-button search-group-lg">
            <label class="sr-only" for="form_control_ex12">Search</label>
            <input id="form_control_ex12" class="form-control" type="search" disabled placeholder="Search...">
            <button type="submit" class="btn search-icon" tabindex="-1" aria-disabled="true">Search</button>
        </div>
    </div>
</form>