<div class="ais-RefinementList">
<div class="ais-RefinementList-searchBox">
<!-- SearchBox widget here -->
</div>
<ul class="ais-RefinementList-list">
<li class="ais-RefinementList-item ais-RefinementList-item--selected">
<label class="ais-RefinementList-label">
<input class="ais-RefinementList-checkbox" type="checkbox" value="Insignia™" checked="" />
<span class="ais-RefinementList-labelText">Insignia™</span>
<span class="ais-RefinementList-count">746</span>
</label>
</li>
<li class="ais-RefinementList-item">
<label class="ais-RefinementList-label">
<input class="ais-RefinementList-checkbox" type="checkbox" value="Samsung">
<span class="ais-RefinementList-labelText">Samsung</span>
<span class="ais-RefinementList-count">633</span>
</label>
</li>
</ul>
<button class="ais-RefinementList-showMore">Show more</button>
</div>
Hint: hover classes below to see their position.
| name | description |
|---|---|
.ais-RefinementList | the root div of the widget |
.ais-RefinementList--noRefinement | the root div of the widget with no refinement |
.ais-RefinementList-searchBox | the search box of the widget |
.ais-RefinementList-list | the list of refinement items |
.ais-RefinementList-item | the refinement list item |
.ais-RefinementList-item--selected | the refinement selected list item |
.ais-RefinementList-label | the label of each refinement item |
.ais-RefinementList-checkbox | the checkbox input of each refinement item |
.ais-RefinementList-labelText | the label text of each refinement item |
.ais-RefinementList-count | the count of values for each item |
.ais-RefinementList-noResults | the div displayed when there are no results |
.ais-RefinementList-showMore | the button used to display more categories |
.ais-RefinementList-showMore--disabled | the disabled button used to display more categories |
Note: this is a guideline for new InstantSearch flavours, not a rule.
| name | default value | description |
|---|---|---|
attribute | | Attribute to apply the filter to |
searchable | | Whether to add a search box to refine this list |
operator | "or" | How to apply refinements. Possible values: or, and |
limit | 10 | Number of items to show |
showMoreLimit | 20 | Number of items to show when the user clicked on "show more items" |
showMore | | Whether or not to have the option to load more values |
sortBy | | array or function to sort the results by |
transformItems | | Function which receives the items, which will be called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, remove or reorder them |
Note: this is a guideline for new InstantSearch flavours, not a rule.
| name | default value | description |
|---|---|---|
resetButtonTitle | "Clear the search query" | The submit button title of the search box. |
submitButtonTitle | "Submit the search query" | The reset button title of the search box. |
noResultsText | "No results." | The text to display when searching for facets returns no results. |
showMoreButtonText | ({ isShowingMore }) => isShowingMore ? "Show less" : "Show more" | The text for the “Show more” button. |