Search – Carbon Design System

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-.7-7.7S4.2.7 2.3 3 .7 8.8 3 10.7c2 1.7 5 1.7 7 0l4.3 4.3.7-.7zM2 6.5C2 4 4 2 6.5 2S11 4 11 6.5 9 11 6.5 11 2 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.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z"></path></svg>
    </button>
  </div>

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-.7-7.7S4.2.7 2.3 3 .7 8.8 3 10.7c2 1.7 5 1.7 7 0l4.3 4.3.7-.7zM2 6.5C2 4 4 2 6.5 2S11 4 11 6.5 9 11 6.5 11 2 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.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.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 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

Components: Radio button

Search: Usage