Checkbox Facets

Overview

The CheckboxFacet component is designed to render text facets as a set of checkboxes, allowing users to select multiple options simultaneously. This component is particularly suited for filters where users might want to apply multiple criteria, such as selecting several brands, sizes, or colors. This component provides a flexible and user-friendly way to enable multi-select filtering, giving users the power to refine their search results based on multiple attributes. With customizable options for managing selections and appearance, this component can be seamlessly integrated into any e-commerce site.

Usage

// importing component
import { CheckboxFacet } from "@unbxd-ui/react-search-components";
 
// import the style for the component
import "@unbxd-ui/react-search-components/styles/checkboxFacet.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/checkboxFacet.css")

⚠️

Note:

The CheckboxFacet component must be used within the wrapper (in CSR, SSR and Custom Hooks approaches) to ensure that the component and the search functionality work properly.

Live Demo

1. Checkboxes As Dropdown

Below facet components are rendered in the form of dropdowns.

In this demo, there are 3 dropdowns. Each dropdown is customised to display 3 different use cases:

In the first dropdown, the facet values are used as is, ie, as plain texts.
In the second dropdown, the facet values are displayed along with an icon.
In the third dropdown, the facet values are displayed along with their respective color swatch.

There are no products for this query.

import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { CheckboxFacet, Products, SelectedFacets } from "@unbxd-ui/react-search-components";
 
// code for the above example
const FacetIcons: React.FC<{ item: any; }> = ({ item }) => {
    const genderIcons = {
        "women": "https://imageUrl1.png",
        "men": "https://imageUrl2.png",
        "exp": "https://imageUrl3.png"
    }
 
    const facetItem = Object.keys(genderIcons).filter((key: string) => {
        return item.value?.toLowerCase().includes(key.toLowerCase())
    })[0]
 
    if (!facetItem) return null
    else {
        return <div className="facet-icon-item">
            <img src={genderIcons[facetItem]} alt={`Icon for ${item.label}`} />
            {item.label}
        </div>
    }
}
 
const FacetSwatch: React.FC<{ item: any }> = ({ item }) => {
    return <div className="facet-swatch-wrapper">
        <div className="facet-swatch" style={{ backgroundColor: item.value }}></div>
        {item.label}
    </div>
}
 
// rendering the product grid
<UnbxdSearchWrapper>
	...
	<SelectedFacets />
	<CheckboxFacet
		name="size_uFilter"
		renderAs="dropdown"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		showSelectedFacets={true}
	/>
	<CheckboxFacet
		name="gender_uFilter"
		renderAs="dropdown"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		showSelectedFacets={true}
		CustomComponent={FacetIcons}
	/>
	<CheckboxFacet
		name="color_uFilter"
		renderAs="dropdown"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		showSelectedFacets={true}
		CustomComponent={FacetSwatch}
	/>
	<Products />
	...
</UnbxdSearchWrapper>

2. Checkboxes as Accordion

Below facet components are rendered in the form of accordions.

In this demo, there are 3 accordions. Each accordion is customised to display 3 different use cases:

In the first accordion, the facet values are used as is, ie, as plain texts.
In the second accordion, the facet values are displayed along with an icon.
In the third accordion, the facet values are displayed along with their respective color swatch.

There are no products for this query.

import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { CheckboxFacet, Products, SelectedFacets } from "@unbxd-ui/react-search-components";
 
// code for the above example
const FacetIcons: React.FC<{ item: any; }> = ({ item }) => {
    const genderIcons = {
        "women": "https://imageUrl1.png",
        "men": "https://imageUrl2.png",
        "exp": "https://imageUrl3.png"
    }
 
    const facetItem = Object.keys(genderIcons).filter((key: string) => {
        return item.value?.toLowerCase().includes(key.toLowerCase())
    })[0]
 
    if (!facetItem) return null
    else {
        return <div className="facet-icon-item">
            <img src={genderIcons[facetItem]} alt={`Icon for ${item.label}`} />
            {item.label}
        </div>
    }
}
 
const FacetSwatch: React.FC<{ item: any }> = ({ item }) => {
    return <div className="facet-swatch-wrapper">
        <div className="facet-swatch" style={{ backgroundColor: item.value }}></div>
        {item.label}
    </div>
}
 
// rendering the product grid
<UnbxdSearchWrapper>
	...
	<SelectedFacets />
	<CheckboxFacet
		name="size_uFilter"
		renderAs="accordion"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		showSelectedFacets={true}
		defaultOpen={false}
	/>
	<CheckboxFacet
		name="gender_uFilter"
		renderAs="accordion"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		showSelectedFacets={true}
		CustomComponent={FacetIcons}
		defaultOpen={false}
	/>
	<CheckboxFacet
		name="color_uFilter"
		renderAs="accordion"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		showSelectedFacets={true}
		CustomComponent={FacetSwatch}
		defaultOpen={false}
	/>
	<Products />
	...
</UnbxdSearchWrapper>

Props

name

string

The name of the facet in the feed for which you want to display the component.

renderAs

string

If you want to show the facet as a dropdown or accordion.
Values: accordion OR dropdown.
Default Value: accordion.

searchable

boolean

This prop, when set to true, adds a search bar to the component. This allows users to quickly filter and find facet values that match their typed query, enhancing usability for large lists of options.
Default Value: true.

placeholder

string

The text that will be used as a placeholder for the search bar component.
Default Value: "Search facet value...".

multiselect

boolean

Determines if multiple facet values can be selected at once or not.
Default Value: true.

isCollapsible

boolean

Controls whether the facet component can be expanded or collapsed. If disabled, the component will remain open, and users will not be able to collapse it by clicking.
This is only functional when the facet is rendered as an accordion.
Default Value: true.

defaultOpen

boolean

This setting determines whether the facet component is initially collapsed or open by default.
This is only functional when the facet is rendered as an accordion and isCollapsible is set to true.
Default Value: true.

Note

defaultOpen and isCollapsible works hand in hand, i.e. only if isCollapsible is true, isDefaultOpen would work.

applyAll

boolean

Specifies whether a button should be provided to apply all facets at once.
This button will only appear if multiselect is enabled and facet values are not rendered as radio buttons.
Default Value: true.

applyAllLabel

string

The text to be displayed on the applyAll button.
Default Value: "All".

clearBtn

boolean

Specifies whether a button should be provided to clear all applied facets at once.
Default Value: true.

clearBtnLabel

string

The text to be displayed on the clearAll button.
Default Value: "Clear".

showSelectedFacets

string

Specifies whether the selected facets for a particular facet name should be displayed within the facets component..
Default Value: true.

viewMoreLimit

number

Specifies the number of facet values to display, hiding any additional values beyond this limit.
Default Value: 0.

ViewMoreComponent

functional component

A custom component that has to return a clickable element to display all facet values beyond the set limit.
This is only functional if viewMoreLimit is set to a value greater than 0.
Default Value:

const ViewMoreComponent = ({ showRemainingNumber, remainingNumber, styles }) => {
	return <div className={styles?.showMore}>{showRemainingNumber ? `+${remainingNumber} more`: `+ show all`}</div>;
}

ViewLessComponent

functional component

A custom component that has to return a clickable element, which when clicked will render only the viewMoreLimit number of facet values.
Default Value:

const ViewLessComponent = ({ styles }) => {
	return <div className={styles?.showLess}>-show less</div>;
};

showRemainingNumber

boolean

This configuration is used by the ViewMoreComponent to display the remaining number in the 'view more' text, e.g., '+25 more'.
If this is not enabled, only simple text will be shown, e.g., 'view more'.

searchCallback

function

The function that is called when the query is changed in the facet value search bar.
Default Value:

const searchCallback = () => {};

IconComponent

functional component

The IconComponent prop allows you to pass a custom icon component that will be displayed alongside the facet name in the facet header. This provides a way to visually enhance the facet presentation, making it more intuitive and aligned with your application's design.
Default Value:

const IconComponent = ({ styles }) => {
	return <div className={styles?.icon}>&#8964;</div>;
};

CustomComponent

functional component

The highly customisable component which will be used to display each facet item.
Default Value:

const CustomComponent = (props) => {
    const { item } = props;
 
    return item.label;
}

ActivatorComponent

functional component

The component that will be used as the facets component activator. Clicking this will show/hide the facet values.
Default Value:

const ActivatorComponent = ({ selected, styles }: { selected?: any, styles: any }) => {
	return <div className={styles?.activatorWrapper || defaultSortDropdownProps.styles?.activatorWrapper}>
		<div className={styles?.activatorText || defaultSortDropdownProps.styles?.activatorText}>
			{typeof selected == "object" ? selected.label : "Select"}
		</div>
		<div className={styles?.activatorIcon || defaultSortDropdownProps.styles?.activatorIcon}>
			&#8964;
		</div>
	</div>
}

styles

optional

object

This prop will be used to style the component.
The value must use a defined structure (the structure can be seen in the following example).
The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{
	root: "facets-root", // used for the facet component wrapper
	header: "facets-header", // used for the facet header
	displayName: "facets-displayName", // used for the facet name in the header
	icon: "facets-icon", // used for the toggle collapsible icon
	body: "facets-body", // used for the facet values wrapper
	checkboxRoot: "checkbox-root", // used for the wrapper component of all the checkboxes
	checkboxInput: "checkbox-input", // used for the checkbox input element
	checkBoxLabel: "checkbox-label", // used for the label of the checkbox (facet item name)
	checkBoxCount: "checkbox-count", // used for the count of facet item
	selected: "button-selected", // used for the selected facet value button
	selectedFilters: "inside-selectedFilters", // used for the selected facets wrapper
	selectedFiltersItem: "inside-selectedFilters-items", // used for each selected facet value
	searchInput: "facet-search-input", // used for the search input eleemnt
	btnWrapper: "dd-btnGrp", // used for the wrapper component of the apply/clear buttons
	applyAllBtn: "apply-btn", // used for the 'apply all' button
	clearAllBtn: "clear-btn", // used for the 'clear all' button
	showMore: "showMore", // used for the 'show more' button
	showLess: "showLess", // used for the 'show less' button
}}

Related Hook

useFacets

To use the Unbxd ReactJS SDK without the pre-built CheckboxFacet component, add the functionality to your custom component using the useFacets hook. Refer to the documentation for more details.

useFacets

Related Components

Button Facet Radio Button Facet