Filters

Ready

Filters component provides a user-friendly interface for refining search or data results.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdFilters } from '@fbin-web/neighborhood-core';

Usage

<nbhd-filters total-results="10">
</nbhd-filters>


<script>
  const filters = document.querySelector('nbhd-filters');

  filters.filters = [
    {
      title: 'Category',
      key: 'category',
      expanded: false,
      description: 'Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
      options: [
        {
          label: 'Kitchen',
          count: 420,
          value: 'Kitchen',
          selected: false,
        },
        {
          label: 'Kitchen Faucets',
          count: 418,
          value: 'Kitchen Faucets',
          selected: false,
        },
        {
          label: 'Kitchen Sink Faucets',
          count: 416,
          value: 'Kitchen Sink Faucets',
          selected: false,
        },
        {
          label: 'Smart Home',
          count: 22,
          value: 'Smart Home',
          selected: false,
        },
        {
          label: 'Kitchen Accessories',
          count: 2,
          value: 'Kitchen Accessories',
          selected: false,
        },
        {
          label: 'Dispensers',
          count: 2,
          value: 'Dispensers',
          selected: false,
        },
        {
          label: 'Parts',
          count: 2,
          value: 'Parts',
          selected: true,
        },
      ],
    },
    {
      title: 'Collection',
      key: 'Collection',
      expanded: false,
      options: [
        {
          label: 'Align',
          count: 10,
          value: 'Align',
          selected: false,
        },
        {
          label: 'Sleek',
          count: 8,
          value: 'Sleek',
          selected: false,
        },
        {
          label: 'Chateau',
          count: 31,
          value: 'Chateau',
          selected: false,
        },
        {
          label: 'Adler',
          count: 19,
          value: 'Adler',
          selected: false,
        },
        {
          label: 'Camerist',
          count: 17,
          value: 'Camerist',
          selected: false,
        },
      ],
    },
    {
      title: 'Finish',
      key: 'Finish',
      tooltip: 'Select your favorite colors',
      expanded: false,
      options: [
        {
          label: 'Chrome',
          count: 288,
          value: 'chrome',
          selected: false,
          finishImage: 'https://moen.widen.net/content/3d7ihxrfrz/png/chrome_100.png',
        },
        {
          label: 'Spot Resist Stainless',
          count: 261,
          value: 'spot resist stainless',
          selected: true,
          finishImage: 'https://moen.widen.net/content/3d7ihxrfrz/png/chrome_100.png',
        },
        {
          label: 'Matte Black',
          count: 129,
          value: 'matte black',
          selected: true,
        },
        {
          label: 'Classic Stainless',
          count: 58,
          value: 'classic stainless',
          selected: false,
        },
        {
          label: 'Oil Rubbed Bronze',
          count: 55,
          value: 'oil rubbed bronze',
          selected: false,
        },
        {
          label: 'Brushed Gold',
          count: 36,
          value: 'brushed gold',
          selected: false,
        },
        {
          label: 'Stainless',
          count: 32,
          value: 'stainless',
          selected: false,
        },
        {
          label: 'Bronzed Gold',
          count: 31,
          value: 'bronzed gold',
          selected: false,
        },
        {
          label: 'Mediterranean Bronze',
          count: 30,
          value: 'mediterranean bronze',
          selected: false,
        },
        {
          label: 'Polished Nickel',
          count: 28,
          value: 'polished nickel',
          selected: false,
        },
      ],
    },
    {
      title: 'Type Of Handles',
      key: 'Type of Handles',
      expanded: false,
      options: [
        {
          label: 'Lever Handles',
          count: 404,
          value: 'Lever handles',
          selected: false,
          tooltip:
            'Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod.',
        },
        {
          label: 'Knob Handles',
          count: 10,
          value: 'Knob handles',
          selected: false,
        },
        {
          label: 'Lever And Knob Handles',
          count: 2,
          value: 'Lever and knob handles',
          selected: false,
        },
        {
          label: 'Lever And Cross Handles',
          count: 1,
          value: 'Lever and cross handles',
          selected: false,
        },
      ],
    },
    {
      title: '',
      key: 'facets-1',
      options: [{ label: 'Option 1' }, { label: 'Option 2' }, { label: 'Option 3' }],
    },
  ];
</script>

Install

npm install @fbin-web/neighborhood-react

Import

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

Usage

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

const filters = [
  {
    title: 'Category',
    key: 'category',
    expanded: false,
    description: 'Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
    options: [
      {
        label: 'Kitchen',
        count: 420,
        value: 'Kitchen',
        selected: false,
      },
      {
        label: 'Kitchen Faucets',
        count: 418,
        value: 'Kitchen Faucets',
        selected: false,
      },
      {
        label: 'Kitchen Sink Faucets',
        count: 416,
        value: 'Kitchen Sink Faucets',
        selected: false,
      },
      {
        label: 'Smart Home',
        count: 22,
        value: 'Smart Home',
        selected: false,
      },
      {
        label: 'Kitchen Accessories',
        count: 2,
        value: 'Kitchen Accessories',
        selected: false,
      },
      {
        label: 'Dispensers',
        count: 2,
        value: 'Dispensers',
        selected: false,
      },
      {
        label: 'Parts',
        count: 2,
        value: 'Parts',
        selected: true,
      },
    ],
  },
  {
    title: 'Collection',
    key: 'Collection',
    expanded: false,
    options: [
      {
        label: 'Align',
        count: 10,
        value: 'Align',
        selected: false,
      },
      {
        label: 'Sleek',
        count: 8,
        value: 'Sleek',
        selected: false,
      },
      {
        label: 'Chateau',
        count: 31,
        value: 'Chateau',
        selected: false,
      },
      {
        label: 'Adler',
        count: 19,
        value: 'Adler',
        selected: false,
      },
      {
        label: 'Camerist',
        count: 17,
        value: 'Camerist',
        selected: false,
      },
    ],
  },
  {
    title: 'Finish',
    key: 'Finish',
    tooltip: 'Select your favorite colors',
    expanded: false,
    options: [
      {
        label: 'Chrome',
        count: 288,
        value: 'chrome',
        selected: false,
        finishImage: 'https://moen.widen.net/content/3d7ihxrfrz/png/chrome_100.png',
      },
      {
        label: 'Spot Resist Stainless',
        count: 261,
        value: 'spot resist stainless',
        selected: true,
        finishImage: 'https://moen.widen.net/content/3d7ihxrfrz/png/chrome_100.png',
      },
      {
        label: 'Matte Black',
        count: 129,
        value: 'matte black',
        selected: true,
      },
      {
        label: 'Classic Stainless',
        count: 58,
        value: 'classic stainless',
        selected: false,
      },
      {
        label: 'Oil Rubbed Bronze',
        count: 55,
        value: 'oil rubbed bronze',
        selected: false,
      },
      {
        label: 'Brushed Gold',
        count: 36,
        value: 'brushed gold',
        selected: false,
      },
      {
        label: 'Stainless',
        count: 32,
        value: 'stainless',
        selected: false,
      },
      {
        label: 'Bronzed Gold',
        count: 31,
        value: 'bronzed gold',
        selected: false,
      },
      {
        label: 'Mediterranean Bronze',
        count: 30,
        value: 'mediterranean bronze',
        selected: false,
      },
      {
        label: 'Polished Nickel',
        count: 28,
        value: 'polished nickel',
        selected: false,
      },
    ],
  },
  {
    title: 'Type Of Handles',
    key: 'Type of Handles',
    expanded: false,
    options: [
      {
        label: 'Lever Handles',
        count: 404,
        value: 'Lever handles',
        selected: false,
        tooltip:
          'Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod.',
      },
      {
        label: 'Knob Handles',
        count: 10,
        value: 'Knob handles',
        selected: false,
      },
      {
        label: 'Lever And Knob Handles',
        count: 2,
        value: 'Lever and knob handles',
        selected: false,
      },
      {
        label: 'Lever And Cross Handles',
        count: 1,
        value: 'Lever and cross handles',
        selected: false,
      },
    ],
  },
  {
    title: '',
    key: 'facets-1',
    options: [{ label: 'Option 1' }, { label: 'Option 2' }, { label: 'Option 3' }],
  },
];

const App = () => (
  <>
    <NbhdFilters
      totalResults={10}
      filters={filters}></NbhdFilters>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`filters`	—	`FilterGroup[]`	`[]`	Array of filter groups and their options. This property is not settable via attribute.
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Surface color for the component.
`heading`	`heading`	`string`	`Filters`	Heading displayed for the filters component.
`headingLevel`	`heading-level`	`123456`	`4`	Level of the "Filters" heading. Match it to the page outline.
`clearFiltersLabel`	`clear-filters-label`	`string`	`Remove all`	Label for the button that clears all selected filters.
`maxVisibleOptions`	`max-visible-options`	`number`	`3`	Maximum number of filter options displayed before the expand button is shown.
`expandLabel`	`expand-label`	`string`	`Show more`	Label for the button that displays additional filter options.
`collapseLabel`	`collapse-label`	`string`	`Show less`	Label for the button that hides additional filter options.
`totalResults`	`total-results`	`number`	`0`	Total number of results used to determine whether a filter group should be visually hidden.
`countStyle`	`count-style`	`roundsquarecurly`	`square`	Bracket style used to display filter option counts.
`removeFilterLabel`	`remove-filter-label`	`string`	`Remove filter`	Prefix for each selected-filter chip’s accessible name, e.g. "Remove filter: Chrome".
`resultsAnnouncement`	`results-announcement`	`string`	`{count} results`	Announced to screen readers after a filter change once `total-results` updates. `{count}` is replaced with the result count.

Structure for FilterGroup objects used in the filters property.

Property	Type	Required	Description
`key`	`string`	Yes	Unique identifier for the filter group.
`title`	`string`	No	Display title for the filter group.
`description`	`string`	No	Additional description for the filter group.
`expanded`	`boolean`	No	Whether the filter group is expanded by default.
`tooltip`	`string`	No	Tooltip text to display for the filter group.
`options`	`FilterOption[]`	No	Array of filter options within this group.

Structure for FilterOption objects used within the FilterGroup options property.

Property	Type	Required	Description
`label`	`string`	Yes	Display label for the filter option.
`count`	`number`	No	Number of results for this filter option.
`tooltip`	`string`	No	Tooltip text for the filter option.
`selected`	`boolean`	No	Whether the filter option is currently selected.
`href`	`string`	No	URL associated with the filter option.
`value`	`string`	No	Value associated with the filter option.
`finishImage`	`string`	No	Image URL for finish-related filter options.

Events

Name	Description	Event Detail
`nbhd-filter-change`	Emitted when filter selections change.	`{ selectedFilters: FilterOptionEmitted[] }`

CSS Parts

Name	Description
`base`	The root filters component container.
`sidebar`	The desktop sidebar container.
`sidebar-filter-groups`	The filter groups container in the desktop sidebar.
`drawer`	The mobile filter drawer container.
`header`	The filters header containing the heading and clear action.
`heading`	The filters heading text element.
`selected-filters`	The container for selected filter buttons.
`selected-filter`	An individual selected filter button.
`filter-group-toggle`	The button that expands or collapses a filter group.
`filter-group-panel`	The expandable panel containing a filter group's options.
`checkbox`	An individual filter option checkbox.
`image`	The finish image wrapper for filter options with finish images.
`tooltip`	The filter tooltip container.
`tooltip-description`	The filter tooltip description text.
`sidebar-clear`	The clear filters action in the desktop sidebar.
`drawer-backdrop`	The backdrop behind the mobile filter drawer.
`drawer-panel`	The mobile filter drawer panel.
`drawer-actions`	The action area in the mobile filter drawer.
`drawer-clear`	The clear filters action in the mobile drawer.
`drawer-done`	The done action in the mobile drawer.
`drawer-close`	The button that closes the mobile filter drawer.
`drawer-body`	The content area of the mobile filter drawer.
`drawer-filter-groups`	The filter groups container in the mobile drawer.

nbhd-filters::part(base) {
  /* your styles */
}

Dependencies

Child components <nbhd-filters> renders internally. Import them too when you tree-shake.

TextReady <nbhd-text> FinishReady <nbhd-finish> ButtonReady <nbhd-button>