Skip to main content

Search Bar


For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.


<script src=""></script>


npm i @pearson-ux/search-bar --save


    <pearson-search-bar placeholder="Type a search term here"></pearson-search-bar>


Follow these steps to successfully build out a search bar component. Start by adding a <pearson-search-bar> element.


To include a search options menu add a <ul> element with a class of search-options as a child of the <pearson-search-bar> element.

<pearson-search-bar>    <ul class="search-options">

For each option you want to appear as search criteria, add an <li> element.

<pearson-search-bar>    <ul class="search-options">        <li>first option</li>        <li>second option</li>        <li>third option</li>    </ul></pearson-search-bar>

To include additional filters add a <ul> with a class of filter-options.

<pearson-search-bar>    <ul class="search-options">        <li>first option</li>        <li>second option</li>        <li>third option</li>    </ul>    <ul class="filter-options">            </ul></pearson-search-bar>

For each filter option you want to appear, add an <li> element.

<pearson-search-bar>    <ul slot="search-options">        <li>first option</li>        <li>second option</li>        <li>third option</li>    </ul>    <search-bar-filter slot="filter">        <li>filter one</li>        <li>filter two</li>        <li>filter three</li>    </search-bar-filter></pearson-search-bar>



All attributes in this API are optional.

placeholderstringunsetAdds placeholder text to the input.
startdisabledbooleanfalseDetermines whether the input will start as disabled until a search parameter is selected from the drop down.
errorstringunsetAdds error styling and warning message.
collapsedStringunsetThis attribute can be set to trigger responsive behavior.


The pearson-search-bar component emits one event:

searchWill fire when the search button is clicked.
const searchBar = document.querySelector('pearson-search-bar')searchBar.addEventListener('search', function(event) {  console.log(searchBar.value)})
Forms can be tricky, so here is some guidance around how to implement accessibility successfully.