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.

Search icon
					
<!-- 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.

Search icon
					
<!-- 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.

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

Disabled state

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