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>