Skip to main contentCarbon Design System

Search

Vanilla JS
React Angular Vue CodePen
Code:
<!-- 
  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--xl">
    <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 focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"></path></svg>
    <button class="bx--search-close bx--search-close--hidden" title="Clear search
        input" aria-label="Clear search input">
      
      
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--search-clear" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path></svg>
    </button>
  </div>
Vanilla JS
React Angular Vue CodePen
Code:
<!-- 
  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 focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"></path></svg>
    <button class="bx--search-close bx--search-close--hidden" title="Clear search
        input" aria-label="Clear search input">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--search-clear" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8z"></path></svg>
      
      
    </button>
  </div>
  </div>

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 medium search styles
.bx--search--xl 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.
Edit this page on GitHub
Previous
Components: Radio button
Next
Search: Usage