Results Filter
ready

The Results Filter component provides a user-friendly interface for refining search or data results.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdResultsFilter } from '@fbin-web/neighborhood-core';
<nbhd-results-filter> facets </nbhd-results-filter>

React 

import { NbhdResultsFilter } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdResultsFilter>facets</NbhdResultsFilter>
  </>
);

Properties

Property Attribute Type Default Description
data Required data array Data array for filter options.
resultsTitle results-title string Filters Title for the results filter section.
removeLabel remove-label string Remove all Label for the remove all button.
removeFilterLabel remove-filter-label string Remove filter Label for the remove filter button.
showMoreLabel show-more-label string Show more Label for the show more button.
showLessLabel show-less-label string Show less Label for the show less button.
filterItemsShown filter-items-shown number 3 Maximum number of filter options to display before showing the 'Show more' button.
countAccent count-accent round | square | curly square Accent style for the filter count.

Dependencies

This component contains the following components as dependencies.