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.

					
<!-- Default search field without button -->

<div class="form-group search-group">
    <label for="form_control_ex1" class="sr-only">Search</label>
    <input id="form_control_ex1" class="form-control" type="search" placeholder="Search..." aria-label="searchBlock">
    <span class="search-icon">Search icon</span>
    <span class="clear-search">Clear</span>
</div>

<!-- Default search field with button -->

<div class="form-group search-group search-group-button">
    <label for="form_control_ex2" class="sr-only">Search</label>
    <input id="form_control_ex2" class="form-control" type="search" placeholder="Search..." aria-label="searchBlock">
    <button class="btn search-icon" type="submit" tabindex="-1">Search</button>
    <span class="clear-search">Clear</span>
</div>

Options

Primary

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

					
<!-- Primary search field without button -->

<div class="form-group search-group search-group-primary">
    <label for="form_control_ex3" class="sr-only">Search</label>
    <input id="form_control_ex3" class="form-control" type="search" placeholder="Search..." aria-label="searchBlock">
    <span class="search-icon">Search icon</span>
    <span class="clear-search">Clear</span>
</div>

<!-- Primary search field with button -->

<div class="form-group search-group search-group-primary search-group-button">
    <label for="form_control_ex4" class="sr-only">Search</label>
    <input id="form_control_ex4" class="form-control" type="search" placeholder="Search..." aria-label="searchBlock">
    <button class="btn search-icon" type="submit" tabindex="-1">Search</button>
    <span class="clear-search">Clear</span>
</div>

Sizes

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

					

<div class="form-group search-group search-group-lg">
    ...
</div>

Disabled state

					

<div class="form-group search-group search-group-lg">
    <label for="form_control_ex5" class="sr-only">Search</label>
    <input id="form_control_ex5" class="form-control" disabled type="search" placeholder="Search..." aria-label="searchBlock">
    <span class="search-icon">Search icon</span>
    <span class="clear-search">Clear</span>
</div>