Radio Button Facets

Overview

The RadioButtonFacet component enables the display of text facets as a list of radio buttons, where users can select a single option from a predefined set. This component is perfect for filters that require a mutually exclusive selection, such as choosing a specific color, brand, or product type. By offering a simple and straightforward interface, this component makes it easy for users to focus on and select the most relevant option, enhancing the overall shopping experience. The component's customizable properties allow you to tailor the appearance and behavior to match your application's design.

Usage

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

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

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

Live Demo

1. Radio Buttons 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:

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

import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { RadioButtonFacet, 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 />
	<RadioButtonFacet
		name="size_uFilter"
		renderAs="dropdown"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		selectAll={true}
		showSelectedFacets={true}
	/>
	<RadioButtonFacet
		name="gender_uFilter"
		renderAs="dropdown"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		selectAll={true}
		showSelectedFacets={true}
		CustomComponent={FacetIcons}
	/>
	<RadioButtonFacet
		name="color_uFilter"
		renderAs="dropdown"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		selectAll={true}
		showSelectedFacets={true}
		CustomComponent={FacetSwatch}
	/>
	<Products />
	...
</UnbxdSearchWrapper>

2. Radio Buttons 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:

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

import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { RadioButtonFacet, 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 />
	<RadioButtonFacet
		name="size_uFilter"
		renderAs="accordion"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		selectAll={true}
		showSelectedFacets={true}
	/>
	<RadioButtonFacet
		name="gender_uFilter"
		renderAs="accordion"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		selectAll={true}
		showSelectedFacets={true}
		CustomComponent={FacetIcons}
	/>
	<RadioButtonFacet
		name="color_uFilter"
		renderAs="accordion"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		selectAll={true}
		showSelectedFacets={true}
		CustomComponent={FacetSwatch}
	/>
	<Products />
	...
</UnbxdSearchWrapper>

Props

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

• The way in which the component must be displayed.
• Values: accordion OR dropdown.
• Default Value: accordion.

• 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.

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

• 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.

• 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.

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

• he text to be displayed on the clearAll button.
• Default Value: Clear.

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

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

• 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>;
}

• 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>;
};

• 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'.

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

const searchCallback = () => {};

• 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>;
};

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

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

• 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>
}

• 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
	radioRoot: "radio-root", // used for the wrapper of the radio inputs
	radioItem: "radio-item", // used for each facet item 
	radioInput: "radio-input", // used for the input element of each facet item
	radioLabel: "radio-label", // used for the label of the radio element (facet item name)
	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

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

Related Components

Button FacetCheckbox FacetMultilevel FacetRange FacetSelected Facets