UI.BlueStack.io - Component Library

filter Component

Filter System

Horizontal Filter Bar - Basic Chips

Electronics 24

Clothing 156

Books 89

Home & Garden 45

<div class="filter horizontal">
                <div class="filter-chip" data-filter="category" data-value="electronics">
                    Electronics
                    <span class="count">24</span>
                </div>
                <div class="filter-chip active" data-filter="category" data-value="clothing">
                    Clothing
                    <span class="count">156</span>
                </div>
                <div class="filter-chip" data-filter="category" data-value="books">
                    Books
                    <span class="count">89</span>
                </div>
                <div class="filter-chip" data-filter="category" data-value="home">
                    Home & Garden
                    <span class="count">45</span>
                </div>
                <div class="filter-separator"></div>
                <button class="filter-clear">Clear all</button>
            </div>

Horizontal Filter - With Dropdowns & Search

<div class="filter horizontal">
                <div class="filter-dropdown">
                    <button>
                        <span>Price Range</span>
                        <i class="icon chevron-down"></i>
                    </button>
                </div>
                <div class="filter-dropdown">
                    <button>
                        <span>Brand</span>
                        <i class="icon chevron-down"></i>
                    </button>
                </div>
                <div class="filter-dropdown">
                    <button>
                        <span>Rating</span>
                        <i class="icon chevron-down"></i>
                    </button>
                </div>
                <div class="filter-search">
                    <i class="icon search"></i>
                    <input type="text" placeholder="Search filters...">
                </div>
                <button class="filter-clear">Reset</button>
            </div>

Filter Sizes

Tiny

Filter

Options

Small

Filter

Options

Default

Filter

Options

Large

Filter

Options

Big

Filter

Options

<div class="space-y-4">
                <div class="filters tiny">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Tiny</div>
                        <div class="filter-chip">Filter</div>
                        <div class="filter-chip">Options</div>
                    </div>
                </div>
                
                <div class="filters small">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Small</div>
                        <div class="filter-chip">Filter</div>
                        <div class="filter-chip">Options</div>
                    </div>
                </div>
                
                <div class="filter horizontal">
                    <div class="filter-chip active">Default</div>
                    <div class="filter-chip">Filter</div>
                    <div class="filter-chip">Options</div>
                </div>
                
                <div class="filters large">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Large</div>
                        <div class="filter-chip">Filter</div>
                        <div class="filter-chip">Options</div>
                    </div>
                </div>
                
                <div class="filters big">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Big</div>
                        <div class="filter-chip">Filter</div>
                        <div class="filter-chip">Options</div>
                    </div>
                </div>
            </div>

<div class="space-y-4">
                <div class="filters tiny">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Tiny</div>
                        <div class="filter-chip">Filter</div>
                        <div class="filter-chip">Options</div>
                    </div>
                </div>
                
                <div class="filters small">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Small</div>
                        <div class="filter-chip">Filter</div>
                        <div class="filter-chip">Options</div>
                    </div>
                </div>
                
                <div class="filter horizontal">
                    <div class="filter-chip active">Default</div>
                    <div class="filter-chip">Filter</div>
                    <div class="filter-chip">Options</div>
                </div>
                
                <div class="filters large">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Large</div>
                        <div class="filter-chip">Filter</div>
                        <div class="filter-chip">Options</div>
                    </div>
                </div>
                
                <div class="filters big">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Big</div>
                        <div class="filter-chip">Filter</div>
                        <div class="filter-chip">Options</div>
                    </div>
                </div>
            </div>

Filter Colors

Primary

Option 2

Option 3

Positive

Option 2

Option 3

Negative

Option 2

Option 3

Warning

Option 2

Option 3

<div class="space-y-4">
                <div class="filters primary">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Primary</div>
                        <div class="filter-chip">Option 2</div>
                        <div class="filter-chip">Option 3</div>
                    </div>
                </div>
                
                <div class="filters positive">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Positive</div>
                        <div class="filter-chip">Option 2</div>
                        <div class="filter-chip">Option 3</div>
                    </div>
                </div>
                
                <div class="filters negative">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Negative</div>
                        <div class="filter-chip">Option 2</div>
                        <div class="filter-chip">Option 3</div>
                    </div>
                </div>
                
                <div class="filters warning">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Warning</div>
                        <div class="filter-chip">Option 2</div>
                        <div class="filter-chip">Option 3</div>
                    </div>
                </div>
            </div>

<div class="space-y-4">
                <div class="filters primary">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Primary</div>
                        <div class="filter-chip">Option 2</div>
                        <div class="filter-chip">Option 3</div>
                    </div>
                </div>
                
                <div class="filters positive">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Positive</div>
                        <div class="filter-chip">Option 2</div>
                        <div class="filter-chip">Option 3</div>
                    </div>
                </div>
                
                <div class="filters negative">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Negative</div>
                        <div class="filter-chip">Option 2</div>
                        <div class="filter-chip">Option 3</div>
                    </div>
                </div>
                
                <div class="filters warning">
                    <div class="filter horizontal">
                        <div class="filter-chip active">Warning</div>
                        <div class="filter-chip">Option 2</div>
                        <div class="filter-chip">Option 3</div>
                    </div>
                </div>
            </div>

Vertical Filter Sidebar

Basic Vertical Filter

<div class="filter vertical" style="max-width: 280px;">
                <div class="filter-section">
                    <div class="filter-group">
                        <div class="filter-group-header">
                            <span class="filter-group-title">Category</span>
                            <i class="icon chevron-down filter-group-toggle"></i>
                        </div>
                        <div class="filter-group-content">
                            <div class="filter-item">
                                <input type="checkbox" id="v-cat1" checked>
                                <label for="v-cat1">Electronics</label>
                                <span class="count">124</span>
                            </div>
                            <div class="filter-item">
                                <input type="checkbox" id="v-cat2">
                                <label for="v-cat2">Clothing</label>
                                <span class="count">89</span>
                            </div>
                            <div class="filter-item">
                                <input type="checkbox" id="v-cat3">
                                <label for="v-cat3">Books</label>
                                <span class="count">45</span>
                            </div>
                            <div class="filter-item">
                                <input type="checkbox" id="v-cat4">
                                <label for="v-cat4">Home & Garden</label>
                                <span class="count">67</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-section">
                    <div class="filter-group">
                        <div class="filter-group-header">
                            <span class="filter-group-title">Price Range</span>
                            <i class="icon chevron-down filter-group-toggle"></i>
                        </div>
                        <div class="filter-group-content">
                            <div class="filter-range">
                                <div class="filter-range-labels">
                                    <span>$0</span>
                                    <span>$1000</span>
                                </div>
                                <input type="range" class="filter-range-slider" min="0" max="1000" value="500">
                                <div class="filter-range-inputs">
                                    <input type="number" placeholder="Min" value="0">
                                    <input type="number" placeholder="Max" value="1000">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-section">
                    <div class="filter-group">
                        <div class="filter-group-header">
                            <span class="filter-group-title">Brand</span>
                            <i class="icon chevron-down filter-group-toggle"></i>
                        </div>
                        <div class="filter-group-content">
                            <div class="filter-list">
                                <div class="filter-item">
                                    <input type="checkbox" id="v-brand1">
                                    <label for="v-brand1">Apple</label>
                                    <span class="count">23</span>
                                </div>
                                <div class="filter-item">
                                    <input type="checkbox" id="v-brand2" checked>
                                    <label for="v-brand2">Samsung</label>
                                    <span class="count">45</span>
                                </div>
                                <div class="filter-item">
                                    <input type="checkbox" id="v-brand3">
                                    <label for="v-brand3">Sony</label>
                                    <span class="count">18</span>
                                </div>
                                <div class="filter-item">
                                    <input type="checkbox" id="v-brand4">
                                    <label for="v-brand4">LG</label>
                                    <span class="count">12</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-actions">
                    <button class="filter-apply">Apply</button>
                    <button class="filter-reset">Reset</button>
                </div>
            </div>

<div class="filter vertical" style="max-width: 280px;">
                <div class="filter-section">
                    <div class="filter-group">
                        <div class="filter-group-header">
                            <span class="filter-group-title">Category</span>
                            <i class="icon chevron-down filter-group-toggle"></i>
                        </div>
                        <div class="filter-group-content">
                            <div class="filter-item">
                                <input type="checkbox" id="v-cat1" checked>
                                <label for="v-cat1">Electronics</label>
                                <span class="count">124</span>
                            </div>
                            <div class="filter-item">
                                <input type="checkbox" id="v-cat2">
                                <label for="v-cat2">Clothing</label>
                                <span class="count">89</span>
                            </div>
                            <div class="filter-item">
                                <input type="checkbox" id="v-cat3">
                                <label for="v-cat3">Books</label>
                                <span class="count">45</span>
                            </div>
                            <div class="filter-item">
                                <input type="checkbox" id="v-cat4">
                                <label for="v-cat4">Home & Garden</label>
                                <span class="count">67</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-section">
                    <div class="filter-group">
                        <div class="filter-group-header">
                            <span class="filter-group-title">Price Range</span>
                            <i class="icon chevron-down filter-group-toggle"></i>
                        </div>
                        <div class="filter-group-content">
                            <div class="filter-range">
                                <div class="filter-range-labels">
                                    <span>$0</span>
                                    <span>$1000</span>
                                </div>
                                <input type="range" class="filter-range-slider" min="0" max="1000" value="500">
                                <div class="filter-range-inputs">
                                    <input type="number" placeholder="Min" value="0">
                                    <input type="number" placeholder="Max" value="1000">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-section">
                    <div class="filter-group">
                        <div class="filter-group-header">
                            <span class="filter-group-title">Brand</span>
                            <i class="icon chevron-down filter-group-toggle"></i>
                        </div>
                        <div class="filter-group-content">
                            <div class="filter-list">
                                <div class="filter-item">
                                    <input type="checkbox" id="v-brand1">
                                    <label for="v-brand1">Apple</label>
                                    <span class="count">23</span>
                                </div>
                                <div class="filter-item">
                                    <input type="checkbox" id="v-brand2" checked>
                                    <label for="v-brand2">Samsung</label>
                                    <span class="count">45</span>
                                </div>
                                <div class="filter-item">
                                    <input type="checkbox" id="v-brand3">
                                    <label for="v-brand3">Sony</label>
                                    <span class="count">18</span>
                                </div>
                                <div class="filter-item">
                                    <input type="checkbox" id="v-brand4">
                                    <label for="v-brand4">LG</label>
                                    <span class="count">12</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-actions">
                    <button class="filter-apply">Apply</button>
                    <button class="filter-reset">Reset</button>
                </div>
            </div>

Vertical Filter with Header & Footer

Filters

Expand all

<div class="filter vertical with-header" style="max-width: 320px;">
                <div class="filter-header">
                    <div class="filter-header-title">Filters</div>
                    <div class="filter-header-actions">
                        <span class="filter-header-expand">Expand all</span>
                        <div class="filter-header-close">
                            <i class="icon x"></i>
                        </div>
                    </div>
                </div>
                
                <div class="filter-body">
                    <div class="filter-section">
                        <div class="filter-group">
                            <div class="filter-group-header">
                                <span class="filter-group-title">Product Type</span>
                                <i class="icon chevron-down filter-group-toggle"></i>
                            </div>
                            <div class="filter-group-content">
                                <div class="filter-item">
                                    <input type="radio" name="type" id="h-type1" checked>
                                    <label for="h-type1">All Products</label>
                                </div>
                                <div class="filter-item">
                                    <input type="radio" name="type" id="h-type2">
                                    <label for="h-type2">New Arrivals</label>
                                </div>
                                <div class="filter-item">
                                    <input type="radio" name="type" id="h-type3">
                                    <label for="h-type3">Best Sellers</label>
                                </div>
                                <div class="filter-item">
                                    <input type="radio" name="type" id="h-type4">
                                    <label for="h-type4">On Sale</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <div class="filter-group">
                            <div class="filter-group-header">
                                <span class="filter-group-title">Customer Rating</span>
                                <i class="icon chevron-down filter-group-toggle"></i>
                            </div>
                            <div class="filter-group-content">
                                <div class="filter-item">
                                    <input type="checkbox" id="h-rating5">
                                    <label for="h-rating5">⭐⭐⭐⭐⭐ 5 Stars</label>
                                    <span class="count">142</span>
                                </div>
                                <div class="filter-item">
                                    <input type="checkbox" id="h-rating4" checked>
                                    <label for="h-rating4">⭐⭐⭐⭐ 4+ Stars</label>
                                    <span class="count">298</span>
                                </div>
                                <div class="filter-item">
                                    <input type="checkbox" id="h-rating3">
                                    <label for="h-rating3">⭐⭐⭐ 3+ Stars</label>
                                    <span class="count">412</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <div class="filter-group collapsed">
                            <div class="filter-group-header">
                                <span class="filter-group-title">Shipping Options</span>
                                <i class="icon chevron-down filter-group-toggle"></i>
                            </div>
                            <div class="filter-group-content">
                                <div class="filter-item">
                                    <input type="checkbox" id="h-ship1">
                                    <label for="h-ship1">Free Shipping</label>
                                    <span class="count">234</span>
                                </div>
                                <div class="filter-item">
                                    <input type="checkbox" id="h-ship2">
                                    <label for="h-ship2">Express Delivery</label>
                                    <span class="count">89</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-footer">
                    <div class="filter-footer-info">
                        <strong>234</strong> products found
                    </div>
                    <div class="filter-footer-actions">
                        <button class="filter-apply">Apply Filters</button>
                        <button class="filter-reset">Clear</button>
                    </div>
                </div>
            </div>

<div class="filter vertical with-header" style="max-width: 320px;">
                <div class="filter-header">
                    <div class="filter-header-title">Filters</div>
                    <div class="filter-header-actions">
                        <span class="filter-header-expand">Expand all</span>
                        <div class="filter-header-close">
                            <i class="icon x"></i>
                        </div>
                    </div>
                </div>
                
                <div class="filter-body">
                    <div class="filter-section">
                        <div class="filter-group">
                            <div class="filter-group-header">
                                <span class="filter-group-title">Product Type</span>
                                <i class="icon chevron-down filter-group-toggle"></i>
                            </div>
                            <div class="filter-group-content">
                                <div class="filter-item">
                                    <input type="radio" name="type" id="h-type1" checked>
                                    <label for="h-type1">All Products</label>
                                </div>
                                <div class="filter-item">
                                    <input type="radio" name="type" id="h-type2">
                                    <label for="h-type2">New Arrivals</label>
                                </div>
                                <div class="filter-item">
                                    <input type="radio" name="type" id="h-type3">
                                    <label for="h-type3">Best Sellers</label>
                                </div>
                                <div class="filter-item">
                                    <input type="radio" name="type" id="h-type4">
                                    <label for="h-type4">On Sale</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <div class="filter-group">
                            <div class="filter-group-header">
                                <span class="filter-group-title">Customer Rating</span>
                                <i class="icon chevron-down filter-group-toggle"></i>
                            </div>
                            <div class="filter-group-content">
                                <div class="filter-item">
                                    <input type="checkbox" id="h-rating5">
                                    <label for="h-rating5">⭐⭐⭐⭐⭐ 5 Stars</label>
                                    <span class="count">142</span>
                                </div>
                                <div class="filter-item">
                                    <input type="checkbox" id="h-rating4" checked>
                                    <label for="h-rating4">⭐⭐⭐⭐ 4+ Stars</label>
                                    <span class="count">298</span>
                                </div>
                                <div class="filter-item">
                                    <input type="checkbox" id="h-rating3">
                                    <label for="h-rating3">⭐⭐⭐ 3+ Stars</label>
                                    <span class="count">412</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <div class="filter-group collapsed">
                            <div class="filter-group-header">
                                <span class="filter-group-title">Shipping Options</span>
                                <i class="icon chevron-down filter-group-toggle"></i>
                            </div>
                            <div class="filter-group-content">
                                <div class="filter-item">
                                    <input type="checkbox" id="h-ship1">
                                    <label for="h-ship1">Free Shipping</label>
                                    <span class="count">234</span>
                                </div>
                                <div class="filter-item">
                                    <input type="checkbox" id="h-ship2">
                                    <label for="h-ship2">Express Delivery</label>
                                    <span class="count">89</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-footer">
                    <div class="filter-footer-info">
                        <strong>234</strong> products found
                    </div>
                    <div class="filter-footer-actions">
                        <button class="filter-apply">Apply Filters</button>
                        <button class="filter-reset">Clear</button>
                    </div>
                </div>
            </div>

Mobile Filter Components

Mobile Filter Trigger

<div class="flex items-center gap-4">
                <button class="filter-trigger">
                    <i class="icon filter"></i>
                    <span>Filters</span>
                    <span class="badge">3</span>
                </button>
                
                <button class="filter-trigger">
                    <i class="icon sliders"></i>
                    <span>Advanced Filters</span>
                </button>
            </div>

Loading States

<div class="space-y-4">
                <div class="filter horizontal loading">
                    <div class="filter-skeleton h-8 w-20 rounded"></div>
                    <div class="filter-skeleton h-8 w-24 rounded"></div>
                    <div class="filter-skeleton h-8 w-20 rounded"></div>
                    <div class="filter-skeleton h-8 w-28 rounded"></div>
                </div>
                
                <div class="filter vertical loading" style="max-width: 280px;">
                    <div class="p-4 space-y-3">
                        <div class="filter-skeleton h-6 w-24 rounded"></div>
                        <div class="filter-skeleton h-4 w-full rounded"></div>
                        <div class="filter-skeleton h-4 w-full rounded"></div>
                        <div class="filter-skeleton h-4 w-3/4 rounded"></div>
                    </div>
                </div>
            </div>

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

<div class="bg-gray-900 text-gray-100 p-4 rounded-lg">
                <pre class="text-sm"><code>// 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</code></pre>
            </div>

Best Practices

Horizontal Filters: Best for 3-6 options, simple filtering needs
Vertical Filters: Ideal for 7+ options, complex filtering with categories
Mobile Considerations: Always provide a trigger button for mobile overlay
Performance: Debounce filter changes to avoid excessive updates
Accessibility: Use proper ARIA labels and keyboard navigation
Visual Feedback: Show active states, counts, and loading states
Clear Actions: Always provide reset/clear options