Filter Component Examples

Pills Filter (Default Style)

The default pills style provides a clean, modern appearance perfect for status filters, category selectors, and quick toggles.

Live Demo: Filter Cards by Status

Project Alpha

Dashboard redesign in progress

Active

Project Beta

Awaiting client approval

Pending

Project Gamma

Successfully delivered

Completed

Project Delta

Feature development ongoing

Active

Project Epsilon

Under review

Pending

Project Zeta

Phase 1 completed

Completed

Showing: All cards

<!-- Pills Filter -->
<div data-rsl-filter
     data-filter-key="card-status"
     data-filter-style="pills"
     data-filter-default="all"
     aria-label="Filter cards by status">
    <button data-filter-value="all">All</button>
    <button data-filter-value="active">Active</button>
    <button data-filter-value="pending">Pending</button>
    <button data-filter-value="completed">Completed</button>
</div>

<!-- Cards to filter -->
<div class="demo-card" data-status="active">...</div>
<div class="demo-card" data-status="pending">...</div>

<script>
// Subscribe to filter changes
RSL.FilterBus.subscribe('card-filter', function(state) {
    var status = state['card-status'];
    var cards = document.querySelectorAll('.demo-card');

    cards.forEach(function(card) {
        if (!status || status === 'all') {
            card.classList.remove('hidden');
        } else {
            card.classList.toggle('hidden', card.dataset.status !== status);
        }
    });
}, { keys: ['card-status'] });
</script>

Button Group Filter

A connected button group style that works well for binary or few-option selections.

Live Demo: View Mode Selector

View mode: grid

<div data-rsl-filter
     data-filter-key="view-mode"
     data-filter-style="buttons"
     data-filter-default="grid"
     aria-label="Select view mode">
    <button data-filter-value="grid">
        <i class="fas fa-th"></i> Grid
    </button>
    <button data-filter-value="list">
        <i class="fas fa-list"></i> List
    </button>
    <button data-filter-value="compact">
        <i class="fas fa-bars"></i> Compact
    </button>
</div>

Multi-Select Chips

Allow users to select multiple filter values simultaneously. Perfect for tag-based filtering.

Live Demo: Select Multiple Categories

Selected categories: None

<div data-rsl-filter
     data-filter-key="categories"
     data-filter-style="chips"
     data-filter-multi="true"
     data-filter-color="success"
     aria-label="Filter by categories">
    <button data-filter-value="design">Design</button>
    <button data-filter-value="development">Development</button>
    <button data-filter-value="marketing">Marketing</button>
    <button data-filter-value="analytics">Analytics</button>
    <button data-filter-value="security">Security</button>
</div>

<script>
RSL.FilterBus.subscribe('categories-demo', function(state) {
    var selected = state['categories'];
    if (Array.isArray(selected) && selected.length > 0) {
        console.log('Selected:', selected.join(', '));
    }
}, { keys: ['categories'] });
</script>

Search Filter

A text input filter with debounced search for filtering by keywords or text content.

Live Demo: Search Products

Search query: empty

<div data-rsl-filter
     data-filter-key="search-query"
     data-filter-style="search"
     data-filter-placeholder="Search products..."
     data-filter-debounce="300"
     data-filter-label="Search products"
     aria-label="Search products">
</div>

<script>
RSL.FilterBus.subscribe('search-demo', function(state) {
    var query = state['search-query'];
    if (query) {
        // Filter your data by the search query
        filterProducts(query);
    }
}, { keys: ['search-query'] });
</script>

Dropdown Filter

A dropdown select for when you have many options or limited space.

Live Demo: Select Region

<div data-rsl-filter
     data-filter-key="region"
     data-filter-style="dropdown"
     data-filter-placeholder="Select region..."
     aria-label="Filter by region">
    <option data-filter-value="north-america">North America</option>
    <option data-filter-value="europe">Europe</option>
    <option data-filter-value="asia-pacific">Asia Pacific</option>
    <option data-filter-value="latin-america">Latin America</option>
    <option data-filter-value="middle-east">Middle East</option>
</div>

Date Picker Filter

A date range picker for filtering content by date. Supports single date, date range, and multiple date selection modes with preset shortcuts.

Live Demo: Filter by Date Range

Selected date range: None

<!-- Date Range Picker with Presets -->
<input type="text"
       data-rsl-date-picker
       data-mode="range"
       data-show-presets="true"
       data-presets="today,yesterday,last7,last30,thisMonth,lastMonth"
       data-filterbus-publish="dateRange"
       data-clearable="true"
       placeholder="Select date range..."
       aria-label="Filter by date range">

<script>
// Subscribe to date changes
RSL.FilterBus.subscribe('date-demo', function(state) {
    var dateFilter = state['dateRange'];
    if (dateFilter && dateFilter.startDate) {
        console.log('Date range:', dateFilter.startDate, 'to', dateFilter.endDate);
        console.log('Formatted:', dateFilter.formatted);
    }
}, { keys: ['dateRange'] });
</script>

Available Presets

Use data-presets to enable quick date selection:

today - Today only
yesterday - Yesterday only
last7 - Last 7 days
last30 - Last 30 days
thisMonth - This month
lastMonth - Last month
thisQuarter - This quarter
lastQuarter - Last quarter

Size Variants

Three size options to fit different UI contexts.

Small Size

Medium Size (Default)

Large Size

<!-- Small -->
<div data-rsl-filter data-filter-size="sm">...</div>

<!-- Medium (default) -->
<div data-rsl-filter data-filter-size="md">...</div>

<!-- Large -->
<div data-rsl-filter data-filter-size="lg">...</div>

Color Variants

Five color themes to match your design system.

Primary:

Success:

Warning:

Danger:

Info:

<!-- Primary (default) -->
<div data-rsl-filter data-filter-color="primary">...</div>

<!-- Success -->
<div data-rsl-filter data-filter-color="success">...</div>

<!-- Warning -->
<div data-rsl-filter data-filter-color="warning">...</div>

<!-- Danger -->
<div data-rsl-filter data-filter-color="danger">...</div>

<!-- Info -->
<div data-rsl-filter data-filter-color="info">...</div>

FilterBus: Cross-Component Communication

The FilterBus allows multiple components to respond to the same filter state. Here's an example with multiple filters and a unified state display.

Multiple Filters Working Together

Filter by Priority:

Filter by Type:

Current Filter State:

{ }

// Subscribe to all filter changes
RSL.FilterBus.subscribe('my-dashboard', function(state, meta) {
    console.log('Filter state changed:', state);
    console.log('Changed key:', meta.key);
    console.log('Change source:', meta.source);

    // Update your UI components
    updateDashboard(state);
});

// Subscribe to specific keys only
RSL.FilterBus.subscribe('priority-only', function(state) {
    console.log('Priority filter:', state.priority);
}, { keys: ['priority'] });

// Programmatically set filters
RSL.FilterBus.publish('priority', 'high');

// Batch update multiple filters
RSL.FilterBus.batch({
    priority: 'medium',
    type: 'feature',
    status: 'active'
});

// Clear all filters
RSL.FilterBus.clearAll();

// Undo last change
RSL.FilterBus.undo();

State Persistence

Filters can automatically save their state to localStorage and restore it on page reload.

Persistent Filter (Try refreshing the page!)

How It Works

When data-filter-persist="true" is set, the filter value is saved to localStorage whenever it changes and restored automatically on page load.

<!-- Enable persistence -->
<div data-rsl-filter
     data-filter-key="saved-theme"
     data-filter-style="buttons"
     data-filter-persist="true"
     data-filter-default="auto"
     aria-label="Select theme preference">
    <button data-filter-value="light">Light</button>
    <button data-filter-value="dark">Dark</button>
    <button data-filter-value="auto">Auto</button>
</div>

<!-- Programmatic persistence -->
<script>
// Enable persistence for a key
RSL.FilterBus.persist('rsl-filters-v1');

// Restore from localStorage
RSL.FilterBus.restore('rsl-filters-v1');
</script>

Filter Examples