BlueStack.io - Component Library

filter Component

Filter System

Horizontal Filter Bar - Basic Chips

Preview Code

Copy

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

Preview Code

Copy

<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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

<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

Preview Code

Copy

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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

// 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