Facets

Basic Setup & Configuration

1. How do I import and use the Facets components?

You can import the different facet components from @unbxd-ui/react-search-components like Facets, CheckboxFacet, ButtonFacet, RadioButtonFacet, MultilevelFacet , RangeFacet.

import { Facets, CheckboxFacet, ButtonFacet, RadioButtonFacet, MultilevelFacet, RangeFacet } from "@unbxd-ui/react-search-components";

2. What are the different types of facet components available?

There are five main facet component types, each offering the same filtering functionality with different user interfaces:

1. CheckboxFacet - Multiple selection with checkboxes for multiselect filtering
2. ButtonFacet - Facet values displayed as clickable buttons with toggle functionality
3. RadioButtonFacet - Single selection with radio buttons for exclusive filtering
4. MultilevelFacet - Hierarchical navigation for category trees with breadcrumb support
5. RangeFacet - Numeric range filtering for price, ratings, or other numeric values

3. Can I limit facet selection to only one value per facet?

Yes, you can control single vs multiple selection behavior using the multiselect prop. Click here to view the multiselect documentation.

4. How do I configure MultilevelFacet for category navigation?

MultilevelFacet is designed for hierarchical category navigation. Configure it with the name prop (typically "categoryPath") and control parent display behavior:

<MultilevelFacet
	name="categoryPath"
	showAllParents={true} // Show all parent categories in breadcrumb
	viewMore={false} // Control view more functionality
	viewMoreLimit={5} // Limit initial visible items
/>

5. How does breadcrumb navigation work in MultilevelFacet?

MultilevelFacet integrates with the useBreadcrumb hook to provide hierarchical navigation. Users can click on parent categories to navigate back up the hierarchy. The component automatically manages breadcrumb state and allows clicking on any level to filter to that category level.

Facet Behavior & Selection

1. When should I use the main Facets component versus individual facet components?

Use the main Facets component when you want a unified, configurable facet interface that can automatically render different facet types based on configuration. Use individual components when you need specific control over each facet's behavior and styling.

Additionally, when using the Facets component, facets are displayed in the same order as configured in the console. If you need more control over the facet order to override what's coming from the console configuration, individual components should be used instead.

// Use Facets for unified, configurable interface
<Facets
  facets={[
    { name: "brand", displayName: "Brand", type: "checkbox" },
    { name: "color", displayName: "Color", type: "button" },
    { name: "price", displayName: "Price", type: "range" }
  ]}
/>
 
// Use individual components for specific control
<CheckboxFacet name="brand" multiselect={true} />
<ButtonFacet name="color" multiselect={false} />
<RangeFacet name="price" />

2. How do I configure RangeFacet as a single slider vs multi-range slider?

RangeFacet supports both single value and range selection through the isMultiSlider prop:

// Single value slider (e.g., minimum price)
<RangeFacet
  name="price"
  isMultiSlider={false}
  min={0}
  max={1000}
  step={10}
/>
 
// Multi-range slider (e.g., price range)
<RangeFacet
  name="price"
  isMultiSlider={true}
  min={0}
  max={1000}
  step={10}
  showInputBoxes={true}
  showInputLabels={true}
/>

3. How do I set custom min, max, and step values for RangeFacet?

Configure the range boundaries and increment behavior using min, max, and step props:

<RangeFacet
  name="price"
  min={0}           // Minimum value
  max={2000}        // Maximum value
  step={25}         // Step increment (slider moves in increments of 25)
  isMultiSlider={true}
/>
 
// For ratings (0-5 with 0.5 increments)
<RangeFacet
  name="rating"
  min={0}
  max={5}
  step={0.5}
  isMultiSlider={false}
/>

4. Can I control whether facets are open or closed by default?

Yes, you can control the default expanded/collapsed state of facets using the isCollapsible and defaultOpen props:

// Facet open by default
<CheckboxFacet
  name="brand"
  isCollapsible={true}
  defaultOpen={true}    // Facet starts expanded
/>
 
// Facet closed by default
<CheckboxFacet
  name="color"
  isCollapsible={true}
  defaultOpen={false}   // Facet starts collapsed
/>

5. Can I limit to show only 5 facet values and hide others ?

Yes, Use the viewMore and viewMoreLimit props to control facet display:

<CheckboxFacet
	name="brand"
	viewMore={false} // Initially show limited options
	viewMoreLimit={5} // Show only first 5 options
/>

The component will display a limited number of facet values initially, with an option to expand and show all available values.

6. How does MultilevelFacet handle hierarchical navigation?

MultilevelFacet provides breadcrumb navigation through category hierarchies. It uses the useBreadcrumb hook to track the current path and allows users to navigate back to parent categories. The showAllParents prop controls whether all parent levels are visible or just the immediate parent.

Styling Customization

1. Can I control the indentation and styling of multilevel categories?

Yes, MultilevelFacet automatically indents child categories based on their level using inline styles (marginLeft: 5 * level). You can customize the appearance using the styles prop:

<MultilevelFacet
	name="categoryPath"
	styles={{
		valueWrapper: "custom-category-item",
		categorySelected: "selected-category",
		categoryName: "category-name",
		categoryCount: "category-count",
	}}
/>

2. Can I customize the appearance of facet components?

Yes, use the styles prop to override CSS classes. Each component has its specific style properties.

3. How can I customize individual facet items?

Use the CustomComponent prop to render custom content for each facet option:

const CustomFacetItem = ({ item, onClick, selected }) => (
	<div className="custom-facet-item" onClick={onClick}>
		<span className="facet-icon">🏷️</span>
		<span className="facet-text">{item.label}</span>
		{selected && <span className="selected-indicator">✓</span>}
	</div>
);
 
<CheckboxFacet name="category" CustomComponent={CustomFacetItem} />;

Events and callbacks

1. How do facet components handle validation and errors?

All components internally invokes onEvent and pass "ERROR" event type , this can be used by the user to customize how they want to handle errors.