Search enables users to specify a word or a phrase to find particular relevant pieces of content without the use of navigation. Search can be used as the primary means of discovering content, or as a filter to aid the user in finding content.
Small Search <!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div data-search role="search" class="bx--search bx--search--sm">
<label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>
<input class="bx--search-input" type="text" id="search__input-1" placeholder="Search">
<svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
<path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
fill-rule="nonzero" />
</svg>
<button class="bx--search-close bx--search-close--hidden" title="Clear search
input" aria-label="Clear search input">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
fill-rule="evenodd" />
</svg>
</button>
</div>
</div>
CopyCopy code icon
Show more code Expand code icon
Large Search <!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div data-search role="search" class="bx--search bx--search--lg">
<label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>
<input class="bx--search-input" type="text" id="search__input-1" placeholder="Search">
<svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
<path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
fill-rule="nonzero" />
</svg>
<button class="bx--search-close bx--search-close--hidden" title="Clear search
input" aria-label="Clear search input">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
fill-rule="evenodd" />
</svg>
</button>
</div>
CopyCopy code icon
Show more code Expand code icon
Documentation SCSS
Modifiers
Use these modifiers with .bx--search
class.
Name
Description
.bx--search--sm
Selector for applying small search styles
.bx--search--lg
Selector for applying standard search styles
.bx--search--light
Selector for applying light search styles
JavaScript
Public Methods
Name
Params
Description
toggleLayout
element
: Object
Toggles between the grid and list layout
showClear
value
: String
, icon
: Object
Toggles the clear icon visibility
release
Deletes the instance
Options
Option
Default Selector
Description
selectorInit
[data-search]
The selector to find the Search element.
selectorSearchView
[data-search-view]
The selector to find the search view icon containers.
selectorSearchInput
.bx--search-input
The selector to find the search input.
selectorClearIcon
.bx--search-close
The selector for the clear icon that clears the search box.
selectorIconContainer
.bx--search-button[data-search-toggle]
The data attribute selector for the icon layout container.
classClearHidden
bx--search-close--hidden
The class used to hide the clear icon.
classLayoutHidden
bx--search-view--hidden
The class used to hide the non-selected layout view.