⌘K

filter component

Drop-in semantic component. See examples, sizes, variants, and source.

Faceted filter UI in two flavours: a horizontal filter horizontal bar of filter-chip toggles for quick refinements, or a vertical filter vertical sidebar of filter-group sections (checkboxes, radio lists, range sliders). Wrap a chip set in filters sm/filters primary/etc. to cascade size or color. State management and mobile overlay are wired by filter.js.

Filter System

Horizontal Filter Bar - Basic Chips

Electronics 24
Clothing 156
Books 89
Home & Garden 45

Horizontal Filter - With Dropdowns & Search

Filter Sizes

Tiny
Filter
Options
Small
Filter
Options
Default
Filter
Options
Large
Filter
Options
Big
Filter
Options

Filter Colors

Primary
Option 2
Option 3
Positive
Option 2
Option 3
Negative
Option 2
Option 3
Warning
Option 2
Option 3

Vertical Filter Sidebar

Basic Vertical Filter

Category
124
89
45
67
Price Range
$0 $1000
Brand
23
45
18
12

Vertical Filter with Header & Footer

Filters
Expand all
Product Type
Customer Rating
142
298
412
234 products found

Mobile Filter Components

Mobile Filter Trigger

Loading States

JavaScript Configuration

Filter Component Initialization

// Initialize filter component
const filter = new FilterComponent('.filter', {
    // Options
    onChange: function(filters) {
        console.log('Active filters:', filters);
    },
    onReset: function() {
        console.log('Filters reset');
    },
    debounce: 300,
    autoSubmit: true
});

// API Methods
filter.getActiveFilters();  // Get current filter state
filter.reset();            // Clear all filters
filter.apply();            // Apply current filters
filter.toggle(element);    // Toggle filter chip
filter.collapse(group);    // Collapse filter group
filter.expand(group);      // Expand filter group

Class API Reference

Type Class Usage Notes
Base filter Required base class Pair with horizontal or vertical
filters Container that cascades size / color to chips Wrap with filters sm, filters primary, etc.
filter-trigger Mobile filter button (opens overlay) May contain badge with active count
Orientation horizontal Inline chip / dropdown bar Best for 3-6 options
vertical Sidebar with grouped sections Best for 7+ options
with-header Adds filter-header + filter-footer Modifier on filter vertical
Horizontal Parts filter-chip Toggle chip; add active when selected Use data-filter + data-value
count Numeric badge inside a chip Result count
filter-dropdown Chip-shaped dropdown trigger For multi-value facets
filter-search Inline search input Pair with a leading icon
filter-separator Vertical divider between chip groups Inside filter horizontal
filter-clear "Clear all" / "Reset" button Inside filter horizontal
Vertical Parts filter-section Section wrapper inside the sidebar Holds one or more filter-groups
filter-group Collapsible group of filter items Add collapsed to start closed
filter-group-header Group title row with toggle chevron Click toggles the group
filter-group-content Body of a group (items / range / list) Hidden when group is collapsed
filter-item Single checkbox / radio row Pair with optional count
filter-range Range slider + min/max inputs Use filter-range-slider + filter-range-inputs
filter-header / filter-body / filter-footer Sticky header / scroll body / footer regions Used with with-header
filter-actions Bottom action bar Holds filter-apply + filter-reset
filter-apply / filter-reset Submit / clear buttons JS-handled on click
Sizes filters xs Tiny chips Container modifier
filters sm Small chips Container modifier
(default) Medium chips No wrapper needed
filters xl Large chips Container modifier
filters lg Big chips Container modifier
Color filters primary Blue active chips Container modifier
filters positive Green active chips Container modifier
filters negative Red active chips Container modifier
filters warning Yellow active chips Container modifier
States active Selected chip / item Toggled by JS on click
collapsed Group is closed Modifier on filter-group
loading Skeleton state Pair with filter-skeleton children