Results Filter
ready
The Results Filter component provides a user-friendly interface for refining search or data results.
Loading
Code
HTML
import { NbhdResultsFilter } from '@fbin-web/neighborhood-core';<nbhd-results-filter results="10" results-title="Filters" filter-items-shown="3" count-accent="square"
background="primary-light">
</nbhd-results-filter>React
import { NbhdResultsFilter } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdResultsFilter
results={10}
resultsTitle="Filters"
filterItemsShown={3}
countAccent="square"
background="primary-light"></NbhdResultsFilter>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
data
|
Facet[]
|
[]
|
Data array for filter options. This property is not settable via attribute. | |
background
|
background
|
none | primary-light | secondary-light | primary-dark | secondary-dark
|
none
|
Background theme color for the component. |
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 individual remove filter buttons. |
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. |
facetItemCount
|
facet-item-count
|
number
|
3
|
Number of facet items to display initially. |
countAccent
|
count-accent
|
round | square | curly
|
square
|
Accent style for the filter count brackets. |
results
|
results
|
number
|
0
|
The total number of results. |
Facet Structure
Structure for Facet objects used in the data property.
| Property | Type | Required | Description |
|---|---|---|---|
key
|
string
|
Yes | Unique identifier for the facet. |
title
|
string
|
No | Display title for the facet group. |
content
|
string
|
No | Additional content or description for the facet. |
expanded
|
boolean
|
No | Whether the facet group is expanded by default. |
tooltip
|
string
|
No | Tooltip text to display for the facet. |
filters
|
FilterItem[]
|
No | Array of filter items within this facet group. |
FilterItem Structure
Structure for FilterItem objects used within facet filters array.
| Property | Type | Required | Description |
|---|---|---|---|
label
|
string
|
Yes | Display label for the filter item. |
count
|
number
|
No | Number of results for this filter option. |
tooltip
|
string
|
No | Tooltip text for the filter item. |
selected
|
boolean
|
No | Whether the filter item is currently selected. |
href
|
string
|
No | URL to navigate to when the filter is selected. |
value
|
string
|
No | Value associated with the filter item. |
finishImage
|
string
|
No | Image URL for finish-related filter items. |
Events
| Name | Description | Event Detail |
|---|---|---|
filter-change
Deprecated
|
Emitted when filter selections change. | { selectedFilters: FilterDataEmitted[] } |
nbhd-filter-change
|
Emitted when filter selections change. | { selectedFilters: FilterDataEmitted[] } |
CSS Parts
| Name | Description |
|---|---|
header
|
The main results filter header wrapper containing the title and remove all button. |
title
|
The title text element (h4 tag) at the top of the filter. |
checkbox
|
Individual filter checkbox input elements. |
image
|
The finish image wrapper for filter items that display finish images. |
facet-category-panel
|
The expandable panel container for each facet category containing filter items. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-resultsFilter-host-display
|
block |
--nbhd-resultsFilter-display
|
block |
--nbhd-resultsFilter-inlineSize
|
100% |
--nbhd-resultsFilter-marginBlock
|
0 |
--nbhd-resultsFilter-marginInline
|
0 |
--nbhd-resultsFilter-paddingBlock
|
var(--nbhd-space-4, 16px) |
--nbhd-resultsFilter-paddingInline
|
var(--nbhd-space-05, 2px) |
--nbhd-resultsFilter-position
|
relative |
--nbhd-resultsFilterMobile-display
|
block |
--nbhd-resultsFilterMobile-visibility
|
visible |
--nbhd-resultsFilterDesktop-display
|
none |
--nbhd-resultsFilterDesktop-visibility
|
hidden |
--nbhd-resultsFilterHeader-display
|
flex |
--nbhd-resultsFilterHeader-justifyContent
|
space-between |
--nbhd-resultFilterTitle-fontSize
|
var(--nbhd-fontSize-md, 18px) |
--nbhd-resultFilterTitle-fontWeight
|
var(--nbhd-fontWeight-700, 700) |
--nbhd-resultFilterTitle-marginBlock
|
0 var(--nbhd-space-4, 16px) |
--nbhd-resultsFilterSelected-marginBlock
|
var(--nbhd-space-3, 12px) |
--nbhd-filterSelectedRemove-backgroundColor
|
var(--nbhd-color-lightGray) |
--nbhd-filterSelectedRemove-backgroundColor-hover
|
oklch(from var(--nbhd-color-lightGray) calc(l - 0.05) c h) |
--nbhd-filterSelectedRemove-borderWidth
|
0 |
--nbhd-filterSelectedRemove-color
|
var(--nbhd-color-black) |
--nbhd-filterSelectedRemove-display
|
flex |
--nbhd-filterSelectedRemove-fontSize
|
12px |
--nbhd-filterSelectedRemove-fontWeight
|
var(--nbhd-fontWeight-600) |
--nbhd-filterSelectedRemove-letterSpacing
|
normal |
--nbhd-filterSelectedRemove-paddingBlock
|
var(--nbhd-space-1, 4px) |
--nbhd-filterSelectedRemove-paddingInline
|
var(--nbhd-space-1, 4px) |
--nbhd-filterSelectedRemove-textTransform
|
normal |
--nbhd-filterSelectedRemove-alignItems
|
center |
--nbhd-filterSelectedRemove-gap
|
var(--nbhd-space-2, 8px) |
--nbhd-filterSelectedRemove-marginBlock
|
var(--nbhd-space-1, 4px) |
--nbhd-filterSelectedRemove-marginInline
|
var(--nbhd-space-1, 4px) |
--nbhd-filterTooltip-display
|
inline-block |
--nbhd-filterTooltip-marginInline
|
var(--nbhd-space-1, 4px) 0 |
--nbhd-filterTooltip-position
|
relative |
--nbhd-filterTooltip-verticalAlign
|
middle |
--nbhd-filterTooltipIcon-blockSize
|
var(--nbhd-space-4, 16px) |
--nbhd-filterTooltipIcon-color
|
var(--nbhd-color-white) |
--nbhd-filterTooltipIcon-fill
|
oklch(from var(--nbhd-color-gray) calc(l - 0.15) c h) |
--nbhd-filterToolTipIcon-inlineSize
|
var(--nbhd-space-4, 16px) |
--nbhd-filterTooltipText-inlineSize
|
200px |
--nbhd-filterTooltipText-insetBlockEnd
|
125% |
--nbhd-filterToolText-insetInlineStart
|
50% |
--nbhd-filterTooltipText-opacity
|
0 |
--nbhd-filterTooltipText-pointerEvents
|
none |
--nbhd-filterTooltipText-position
|
absolute |
--nbhd-filterTooltipText-visibility
|
hidden |
--nbhd-filterTooltipText-zIndex
|
500 |
--nbhd-filterTooltipText-backgroundColor
|
var(--nbhd-color-lightGray) |
--nbhd-resultsFilterCategories-borderBlockStartWidth
|
1px |
--nbhd-resultsFilterCategories-borderBlockStartColor
|
var(--nbhd-color-lightGray) |
--nbhd-resultsFilterCategories-borderBlockStartStyle
|
solid |
--nbhd-filterCategory-borderBlockEndColor
|
var(--nbhd-color-lightGray) |
--nbhd-filterCategory-borderBlockEndStyle
|
solid |
--nbhd-filterCategory-borderBlockEndWidth
|
1px |
--nbhd-filterCategory-paddingInline
|
var(--nbhd-space-0, 0) |
--nbhd-filterCategoryToggle-position
|
relative |
--nbhd-filterCategoryToggle-backgroundColor
|
transparent |
--nbhd-filterCategoryToggle-borderColor
|
transparent |
--nbhd-filterCategoryToggle-borderRadius
|
0 |
--nbhd-filterCategoryToggle-borderWidth
|
0 |
--nbhd-filterCategoryToggle-color
|
var(--nbhd-color-black) |
--nbhd-filterCategoryToggle-display
|
flex |
--nbhd-filterCategoryToggle-fontSize
|
var(--nbhd-fontSize-regular, 16px) |
--nbhd-filterCategoryToggle-fontWeight
|
var(--nbhd-fontWeight-700, 700) |
--nbhd-filterCategoryToggle-inlineSize
|
100% |
--nbhd-filterCategoryToggle-maxInlineSize
|
100% |
--nbhd-filterCategoryToggle-letterSpacing
|
normal |
--nbhd-filterCategoryToggle-paddingBlock
|
var(--nbhd-space-5, 20px) |
--nbhd-filterCategoryToggle-paddingInline
|
var(--nbhd-space-1, 4px) var(--nbhd-space-6, 24px) |
--nbhd-filterCategoryToggle-textAlign
|
start |
--nbhd-filterCategoryToggle-textTransform
|
uppercase |
--nbhd-filterCategoryToggle-color-hover
|
var(--nbhd-filterCategoryToggle-color) |
--nbhd-filterCategoryToggle-backgroundColor-hover
|
transparent |
--nbhd-filterCategoryToggle-color-dark
|
var(--nbhd-color-white) |
--nbhd-filterCategoryToggle-backgroundColor-dark
|
transparent |
--nbhd-filterCategoryToggle-borderColor-dark
|
transparent |
--nbhd-filterCategoryPanel-maxBlockSize
|
0 |
--nbhd-filterCategoryPanel-opacity
|
0 |
--nbhd-filterCategoryPanel-paddingBlock
|
0 |
--nbhd-filterCategoryPanel-paddingInline
|
0 |
--nbhd-filterCategoryPanel-pointerEvents
|
none |
--nbhd-filterCategoryPanel-visibility
|
hidden |
--nbhd-filterList-maxBlockSize
|
0 |
--nbhd-filterList-overflowY
|
auto |
--nbhd-filterItemName-fontWeight
|
inherit |
--nbhd-filterItemInput-borderColor-selected
|
var(--nbhd-color-black) |
--nbhd-filterItemInput-borderColor-selected-dark
|
var(--nbhd-color-white) |
--nbhd-filterItemToggle-marginBlock
|
var(--nbhd-space-2, 8px) 0 |
--nbhd-filterItemToggle-fontSize
|
var(--nbhd-fontSize-regular, 16px) |
--nbhd-filterSelectedRemove-letterSpacing-hover
|
normal |
--nbhd-filterItemInput-borderColor-selected-dark
|
var(--nbhd-color-white) |
--nbhd-filterItemLabel-color
|
var(--nbhd-color-black) |
--nbhd-filterItemLabel-cursor
|
pointer |
--nbhd-filterItemLabel-fontSize
|
var(--nbhd-fontSize-regular, 16px) |
--nbhd-filterItemLabel-fontWeight
|
var(--nbhd-fontWeight-700, 700) |
--nbhd-filterItemLabel-lineHeight
|
var(--nbhd-lineHeight-regular, 1.25) |
--nbhd-filterItemLabel-paddingInlineStart
|
var(--nbhd-space-2, 8px) |
--nbhd-filterItemLabel-color-hover
|
var(--nbhd-filterItemLabel-color) |
--nbhd-filterItemLabel-color-dark
|
var(--nbhd-color-white) |
--nbhd-filterItemCheckbox-accentColor
|
var(--nbhd-color-black) |
--nbhd-filterItemCheckbox-blockSize
|
var(--nbhd-space-4, 16px) |
--nbhd-filterItemCheckbox-inlineSize
|
var(--nbhd-space-4, 16px) |
--nbhd-filterItemCheckbox-accentColor-dark
|
var(--nbhd-color-white) |
--nbhd-filterItemImageWrapper-blockSize
|
var(--nbhd-space-6, 24px) |
--nbhd-filterItemImageWrapper-display
|
block |
--nbhd-filterItemImageWrapper-inlineSize
|
var(--nbhd-space-6, 24px) |
--nbhd-filterItemImageWrapper-marginInlineEnd
|
var(--nbhd-space-2, 8px) |
--nbhd-filterItemImageWrapper-overflow
|
hidden |
--nbhd-filterItemImage-inlineSize
|
100% |
--nbhd-filterItemImage-blockSize
|
100% |
--nbhd-filterItemImage-objectFit
|
cover |