The search input is used when searching within an application or within the platform for content. For example, this type of search is often used within the header bar of a list and form or within the header section of an application such as the Visual Task Board. Searches can happen in real time as a user types or it can be executed upon pressing the enter key.
<label for="search1">Search</label>
<div class="input-group-transparent">
<span class="input-group-addon-transparent icon-search"></span>
<input id="search1" class="form-control form-control-search" type="search" name="search1">
</div>
<div class="input-group-transparent">
<span class="input-group-addon-transparent icon-search"></span>
<input id="search1" class="form-control form-control-search" type="search" name="search1">
</div>
The search input with an options menu is used when searching within an application or within the platform for content that requires some type of filter or additional parameters passed in for a more complex search. For example, in am application, a user may want to search only for a specific type of data, or a specific column in a table. Adding a filter or parameters within a search allows the user to obtain a more refined set of results.
<div class="input-group-transparent">
<span class="input-group-addon-transparent icon-search"></span>
<input id="search1" class="form-control form-control-search" type="search" name="search1">
<span class="input-group-addon-transparent input-group-addon-pull-right icon-vcr-down"></span>
</div>
Reference fields appear within forms. The value of this field, when filled, corresponds to a record in the system. They can be distinguished by the attached button with a magnifying glass in it. When a user types text into the empty reference field, it searches the configured table.
<label for="search3" class="control-label">Label</label>
<div class="input-group">
<input type="text" class="form-control form-control-search" placeholder="Placeholder text">
<span class="input-group-btn">
<button class="btn btn-default icon-search"></button>
</span>
</div>
Do not place the search icon out of the search input box, not show the icon at all, or use a a non-approved icon. The icon indicates to a user what is the necessary action.