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="search-group">
    <input id="ex1" class="form-control" type="search" placeholder="Search..." aria-describedby="searchBlock">
    <span class="search-icon"></span>
    <span class="clear-search"></span>
</div>

// Basic search field with button
<div class="search-group search-group-button">
    <input id="ex2" class="form-control" type="search" placeholder="Search..." aria-describedby="searchBlock">
    <button class="btn search-icon" type="submit" tabindex="-1"></button>
    <span class="clear-search"></span>
</div>

// Primary search field without button
<div class="search-group search-group-primary">
    <input id="ex3" class="form-control" type="search" placeholder="Search..." aria-describedby="searchBlock">
    <span class="search-icon"></span>
    <span class="clear-search"></span>
</div>

// Primary search field with button
<div class="search-group search-group-primary search-group-button">
    <input id="ex4" class="form-control" type="search" placeholder="Search..." aria-describedby="searchBlock">
    <button class="btn search-icon" type="submit" tabindex="-1"></button>
    <span class="clear-search"></span>
</div>

// Large size search field
<div class="search-group search-group-lg">
    <input id="ex5" class="form-control" type="search" placeholder="Search..." aria-describedby="searchBlock">
    <span class="search-icon"></span>
    <span class="clear-search"></span>
</div>