Filters
ready

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

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdFilters } from '@fbin-web/neighborhood-core';
<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>

React 

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 none | primary | secondary | inverse | inverse-secondary primary Surface color for the component.
heading heading string Filters Heading displayed for the filters component.
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 round | square | curly square Bracket style used to display filter option counts.

Filter Group Structure

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.

Filter Option Structure

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.

Dependencies

This component contains the following components as dependencies.