Facet Types (UI Controls)
FilterX includes 14 built-in UI controls covering every possible filtering pattern you could need. Each type comes with its own specific configuration settings available directly in the admin panel so you don't have to code them.
Checkbox
checkboxDisplays filter options as a classic list of checkboxes. Visitors can select multiple values simultaneously, which are combined to show results matching ANY of the selected items.
⚙️ Available Configurations
- Show CountsDisplay the number of matching items next to each box.
- Limit OptionsSet a max number before showing a 'View More' toggle.
- LogicChoose between OR logic (ANY selected) or AND logic (ALL selected).
Good for 🛍️ E-Commerce: Allowing users to select multiple Brands or Categories (e.g., 'Show me Nike AND Adidas').
Radio
radioSimilar to checkboxes, but enforces a strict single-choice selection. Clicking a new value automatically deselects the previous one.
⚙️ Available Configurations
- Show CountsDisplay item counts next to each radio button.
- Order BySort options alphabetically (Name) or by popularity (Count).
Good for 🚗 Dealerships: Filtering vehicles by condition ('New' OR 'Used', but never both at the same time).
Dropdown (Select)
dropdownA neat, space-saving HTML `<select>` control. It hides all options until clicked. Supports single or multi-select modes.
⚙️ Available Configurations
- PlaceholderDefault unselected text (e.g., 'Select a Country...').
- Multi-SelectConvert into a pill-based multiple selection dropdown.
- SearchableAdd a text input inside the dropdown to filter long lists.
Good for 🌍 Directories: Filtering a massive list of Countries or States without taking up the entire sidebar.
Button Group
button-groupRenders filter options as clickable pill/buttons closely packed together. Highly visual and modern.
⚙️ Available Configurations
- Multi-selectAllow users to click multiple buttons, acting like visually enhanced checkboxes.
- Layout ContextForce buttons to stretch full-width or inline-block.
Good for 👕 Apparel: Best for selecting clothing Sizes (S, M, L, XL) or quickly toggling broad categories.
Color Swatch
colorRenders filter options as visual colored circles or squares. You can visually map text values (like 'Crimson') to specific HEX colors.
⚙️ Available Configurations
- Swatch MappingVisual UI to assign HEX colors/gradients to your database text values.
- ShapeToggle between Circle or Square swatches.
- Show TooltipsShow the color name when hovering over a swatch.
Good for 👟 Retail: Filtering shoes or shirts by color visually instead of reading text labels.
Range Slider
rangeA dual-handle slider for selecting numeric bounds (min and max). Automatically detects the absolute minimum and maximum values in your database.
⚙️ Available Configurations
- Step IncrementJump values by 1, 10, 100, etc., while dragging.
- Prefix / SuffixAdd currency symbols (e.g., '$') or units (e.g., ' sqft').
- FormatAdd thousands separators and control decimal places.
Good for 🏠 Real Estate: Essential for 'Price Range' sliders or filtering properties by 'Square Footage'.
Date Range
date-rangeProvides a calendar pop-up for users to select a 'From' and 'To' date. Filters results by publication date or custom event dates.
⚙️ Available Configurations
- Date FormatChoose display format (MM/DD/YYYY, YYYY-MM-DD, etc).
- Future OnlyDisable selection of dates in the past.
Good for 🎟️ Event Booking: Finding concerts or hotel availability between two specific dates.
Text Search
searchA live text input box that instantly filters the grid as the user types, using lightning-fast partial string matching.
⚙️ Available Configurations
- PlaceholderText inside the empty box (e.g., 'Search products...').
- Search TargetRestrict search to just Titles, or include Post Content and Excerpt.
- Min CharsWait until user types 3 characters before firing query.
Good for 📚 Libraries & Stores: Quickly looking up a specific Book Title or Product SKU number.
Autocomplete Search
autocompleteAn enhanced search input that provides a dropdown of smart suggestions as the user types. Selecting a suggestion confirms the filter.
⚙️ Available Configurations
- PlaceholderText inside the empty box.
- Show ImagesDisplay the featured image inside the autocomplete dropdown suggestion.
Good for ✈️ Travel: Searching for City names or Airports where spelling might be tricky.
Star Rating
ratingDisplays interactive 1–5 star icons. When a user clicks 4 stars, it automatically filters for items rated 4.0 and above.
⚙️ Available Configurations
- Include UpIf checked, clicking '4 stars' means '4 stars AND HIGHER'.
- Max StarsChange the scale from 5 stars to 10 stars.
Good for ⭐ Product Reviews: 'Show me only highly-rated products'. Deeply integrated with WooCommerce reviews.
On/Off Toggle
toggleA simple binary switch. Toggling it 'On' applies a specific filter rule instantly.
⚙️ Available Configurations
- Value MappingDefine what 'On' means in the database (e.g., meta_value = 1).
- Checked by DefaultHave the toggle pre-selected when the page loads.
Good for ⚡ Quick Actions: Adding a highly visible 'Show only In-Stock items', 'Free Shipping', or 'On Sale' switch at the top of a store.
Hierarchy Tree
hierarchyA nested, collapsible accordion view for hierarchical data (like parent and child categories).
⚙️ Available Configurations
- Auto-CollapseOpening one branch closes other branches automatically.
- Show Empty BranchesDisplay categories that have 0 matches inside.
Good for 🛒 Department Stores: Navigating complex category trees like 'Electronics > Laptops > Gaming Laptops'.
Active Filters (Chips)
active-filtersA special UI component that displays all currently applied filters as removable chips/tags, usually with a 'Clear All' button.
⚙️ Available Configurations
- Show 'Clear All'Toggle visibility of the master reset button.
- Clear All TextCustomize the text of the master reset button.
- Ignore ListSelect specific facets that should NEVER show up as removable chips here.
Good for 🧹 User Experience: Placed directly above the grid so users can keep track of their complex filter combinations and easily clear them.
Sort Dropdown
sortA dropdown control that doesn't filter out items, but instead changes the display order of the grid (e.g., Price: Low to High).
⚙️ Available Configurations
- Sort DefinitionsVisually map display labels (like 'Highest Price') to database rules (orderby: meta_value_num, order: DESC).
- Default SortChoose which option is applied immediately when the page loads.
Good for 📈 Catalog Management: Giving users control to sort by 'Newest Arrivals', 'Price: High to Low', or 'Top Rated'.