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.

Basic design

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

Options

The primary search field variant

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

Sizes

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

Disabled state

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

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

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

// Large size search field
<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" type="search" placeholder="Search..." aria-label="searchBlock">
    <span class="search-icon">Search icon</span>
    <span class="clear-search">Clear</span>
</div>