See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.
A member of the Bluemix Design System's team will be in touch within 48 hours.
Your issue, , is now in the bluemix-components repo. Click the issue number to track the progress or make edits to your issue.
We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:
#bluemix-componentselements
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.
Large Search is used primarily to filter large sets of information that is contextual to the content on the page. Search results manipulate a group of primary content on the page. Do not use search for navigating to other parts of the site.
<div data-search-with-options class='bx--search bx--search-with-options' role='search'>
<svg class='bx--search__icon--magnifier'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#search--glyph'/>
</svg>
<label for='search-with-options__input' class='bx--search__label'>Search</label>
<input type='search' class='bx--search__input' id='search-with-options__input' placeholder='Search'>
<button class='bx--search__sort' type='button'>
<div class='bx--search__toggle-layout__container'>
<svg class='bx--search__icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#filter--glyph'></use>
</svg>
</div>
</button>
<button class='bx--search__toggle-layout' type='button' data-search-toggle-btn>
<div class='bx--search__toggle-layout__container bx--search__toggle-layout__container--hidden' data-search-toggle-layout='grid'>
<svg class='bx--search__icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#grid'/>
</svg>
</div>
<div class='bx--search__toggle-layout__container' data-search-toggle-layout='list'>
<svg class='bx--search__icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#list'/>
</svg>
</div>
</button>
</div>
A smaller, more compact search can be used when there are space constraints.
<div class='bx--search bx--search--sm' role='search'>
<svg class='bx--search__icon--magnifier'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#search--glyph'/>
</svg>
<label for='search__input' class='bx--search__label'>Search</label>
<input type='search' class='bx--search__input' id='search__input' placeholder='Search'>
</div>
Deprecated. Use Large Search instead.
<div class='bx--search' role='search'>
<svg class='bx--search__icon--magnifier'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#search'/>
</svg>
<label for='search__input' class='bx--search__label'>Search</label>
<input type='search' class='bx--search__input' id='search__input' placeholder='Search'>
<button class='bx--search__filter' type='button'>
<svg class='bx--search__icon--filter'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#arrows'/>
</svg>
<span class='filter__text'>Filter</span>
</button>
</div>