Filter

Filters products inside the Product Listing Page (PLP) and Search Page.

The Filter component is used to filter products inside the Product Listing Page (PLP) and Search Page. The Filter component is a compound of the following:

Filter: wraps an Accordion along with the component title.
FilterSlider: SlideOver that wraps the Filter for small screen dimensions.
FilterFacets: wraps an AccordionItem with its AccordionButton and an AccordionPanel for every Facet.
FilterFacetBoolean: wraps the list of the FilterFacetBooleanItem.
FilterFacetBooleanItem: wraps a Checkbox with its Label and the Badge that represents the child of the FilterFacetBoolean.
FilterFacetRange: wraps a PriceRange for a given Facet with the Range type.

Example

Code

Filters

Usage

Import the component


_10import {
_10  Filter,
_10  FilterFacets,
_10  FilterFacetBoolean,
_10  FilterFacetBooleanItem,
_10  FilterFacetRange,
_10} from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:


_10@import "@faststore/ui/src/components/organisms/Filter/styles.scss";

For details, see Importing FastStore UI component styles.

Design tokens

Title

Local token	Default value/Global token linked
`--fs-filter-title-height`	`var(--fs-spacing-6)`
`--fs-filter-title-margin-bottom`	`var(--fs-spacing-0)`
`--fs-filter-title-text-size`	`var(--fs-text-size-2)`
`--fs-filter-title-line-height`	`1.25`

Accordion

Local token	Default value/Global token linked
`--fs-filter-accordion-border-width-notebook`	`var(--fs-border-width)`
`--fs-filter-accordion-border-color-notebook`	`var(--fs-border-color-light)`
`--fs-filter-accordion-border-radius-notebook`	`var(--fs-border-radius)`

Accordion Item Button

Local token	Default value/Global token linked
`--fs-filter-accordion-button-text-size`	`var(--fs-text-size-lead)`
`--fs-filter-accordion-button-text-weight`	`var(--fs-text-weight-regular)`
`--fs-filter-accordion-button-line-height`	`1.5`

`--fs-filter-accordion-button-text-size-notebook`	`var(--fs-text-size-2)`
`--fs-filter-accordion-button-line-height-notebook`	`1.25`
`--fs-filter-accordion-button-padding-right-notebook`	`var(--fs-spacing-4)`
`--fs-filter-accordion-button-padding-left-notebook`	`var(--fs-filter-accordion-button-padding-right-notebook)`

Accordion Item Panel

Local token	Default value/Global token linked
`--fs-filter-accordion-item-panel-padding-right-notebook`	`var(--fs-spacing-4)`
`--fs-filter-accordion-item-panel-padding-left-notebook`	`var(--fs-filter-accordion-item-panel-padding-right-notebook)`

Accordion Item List

Local token	Default value/Global token linked
`--fs-filter-list-padding-bottom`	`var(--fs-spacing-3)`

List Item

Local token	Default value/Global token linked
`--fs-filter-list-item-not-last-margin-bottom`	`var(--fs-spacing-3)`

List Item Checkbox

Local token	Default value/Global token linked
`--fs-filter-list-item-checkbox-width`	`1.25rem`
`--fs-filter-list-item-checkbox-height`	`var(--fs-filter-list-item-checkbox-width)`

List Item Label

Local token	Default value/Global token linked
`--fs-filter-list-item-label-width`	`100%`
`--fs-filter-list-item-label-margin-left`	`var(--fs-spacing-1)`
`--fs-filter-list-item-label-text-size`	`var(--fs-text-size-2)`
`--fs-filter-list-item-label-line-height`	`1.25`

List Item Badge

Local token	Default value/Global token linked
`--fs-filter-list-item-badge-margin-left`	`var(--fs-spacing-1)`

Data attributes

You can target and override Filter styles using the following data attributes:

data-fs-filter

data-fs-filter-title

data-fs-filter-accordion

data-fs-filter-accordion-item

data-fs-filter-list

data-fs-filter-list-item

data-fs-filter-list-item-checkbox

data-fs-filter-list-item-label

data-fs-filter-list-item-badge

data-fs-filter-facet-range

Props

Filter

Name	Type	Description
testId*	`string`	ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).
title	`string`	Title for the `Filter` component.
indicesExpanded*	`Set<number>`	The expanded items from the `Accordion`.
onAccordionChange*	`(index: number) => void`	This function is called when `Accordion` is expanded or collapsed.

FilterFacets

Name	Type	Description
testId*	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
index*	`number`	Current Facet's position in a list of facets.
type*	`string`	Current Facet's type, usually `StoreFacetBoolean` or `StoreFacetRange`.
label*	`string`	The text displayed to identify the Facet.
description	`string`	The description displayed to identify the Facet.

FilterFacetBooleanItem

Name	Type	Description	Default
testId*	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
label*	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	The text displayed to identify the Boolean Facet Item.
value*	`string`	Value to be emitted when Checkbox is clicked.
selected*	`false \| true`	Boolean that represents the Checkbox checked state.
quantity	`number`	Counter badge shown besides the Facet Item.
id*	`string`	ID to identify the Checkbox and corresponding label.
facetKey*	`string`	String that identifies the current Facet key.
onFacetChange*	`OnFacetChange`	This function is called when `Checkbox` from the facet changes.
type	`"checkbox" \| "radio"`	Type of the Facet Item.	`checkbox`

FilterFacetRange

Name	Type	Description
min*	`{ selected: number; absolute: number; }`	The minimum value of the Slider Range Facet
max*	`{ selected: number; absolute: number; }`	The maximum value of the Slider Range Facet
facetKey*	`string`	String that identifies the current Facet key.
formatter*	`(value: number) => string`	Formatter function that transforms the raw value and render the result.
onFacetChange*	`OnFacetChange`	This function is called when `Checkbox` from the facet changes.