---
metaTitle: FilterSelect component | AwesCode UI
meta:
  - name: description
    content: The <AwFilterSelect /> component is used to render FilterSelect - UI Vue component for AwesCode UI.
title: FilterSelect
---

# AwFilterSelect

**Category:** Organism | **Import:** Dynamic

The `AwFilterSelect` component is a dropdown filter that syncs with URL query parameters. It supports single and multiple selection modes, custom serialization, and lazy loading via API requests with infinite scroll.

## Overview

`AwFilterSelect` provides a comprehensive dropdown filter with:
- Single or multiple selection modes
- URL query parameter synchronization
- Static options or dynamic API loading
- Infinite scroll for paginated data
- Custom serialization/deserialization
- Custom active state comparison
- Optional reset functionality
- Icon support in filter button
- Checkbox display for multi-select mode

## Usage

### Basic Example

```markup
<AwFilterSelect
    param="status"
    label="Status"
    :options="[
        { id: 'active', title: 'Active' },
        { id: 'inactive', title: 'Inactive' }
    ]"
/>
```

**Note:** When using boolean values in filter options, they must be represented as strings:

```markup
<AwFilterSelect
    param="is_active"
    label="Status"
    :options="[
        { id: 'true', title: 'Active' },
        { id: 'false', title: 'Inactive' }
    ]"
    single
/>
```

### Multiple Selection

```markup
<AwFilterSelect
    param="categories"
    label="Categories"
    :options="categories"
    :multiple="!single"
/>
```

### With Icon

```markup
<AwFilterSelect
    param="type"
    label="Type"
    icon="awesio/filter"
    :options="types"
    single
/>
```

### With API Request (Infinite Scroll)

```markup
<AwFilterSelect
    param="user_id"
    label="User"
    request-url="/api/users"
    track-by="id"
    option-text="name"
/>
```

### Custom Serialization

```markup
<AwFilterSelect
    param="price_range"
    label="Price Range"
    :options="priceRanges"
    :serialize="(val) => JSON.stringify(val)"
    :parse="(val) => JSON.parse(val)"
    single
/>
```

### Custom Active State

```markup
<AwFilterSelect
    param="status"
    label="Status"
    :options="statuses"
    :is-active="(id, value) => value.some(v => v.status === id)"
/>
```

### Custom Dropdown Content

```markup
<AwFilterSelect
    param="color"
    label="Color"
    :options="colors"
>
    <template #default="{ id, text, active }">
        <div class="flex items-center">
            <div
                class="w-4 h-4 rounded mr-2"
                :style="{ backgroundColor: id }"
            ></div>
            {{ text }}
        </div>
    </template>
</AwFilterSelect>
```

### Without Reset Button

```markup
<AwFilterSelect
    param="sort"
    label="Sort"
    :options="sortOptions"
    single
    no-reset
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| label | Filter button label | `String` | `false` | `'Filter'` |
| param | Query parameter key | `String` | `true` | - |
| icon | Icon name to display in button | `String` | `false` | `''` |
| options | Array of options | `Array` | `false` | `[]` |
| trackBy | Path to option unique id (query param value) | `String` | `false` | `'id'` |
| optionText | Path to option text to show in button | `String` | `false` | `'title'` |
| serialize | Function to encode value before setting in URL | `Function` | `false` | `encodeURIComponent` |
| parse | Function to decode value from URL | `Function` | `false` | Auto-parse numbers |
| isActive | Compare function to highlight active value | `Function` | `false` | Array/value comparison |
| single | Single selection mode (overwrite on change) | `Boolean` | `false` | `false` |
| noReset | Hide reset button | `Boolean` | `false` | `false` |
| requestUrl | API URL for dynamic option loading | `String` | `false` | `''` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| label | Custom filter button label | - | Label prop value |
| dropdown | Complete dropdown replacement | `{ isVisible, open, close, set }` | AwDropdown with buttons |
| buttons | Custom dropdown buttons content | - | Option buttons + reset |
| reset | Custom reset button | - | Reset button |
| default | Custom option content | `{ id, text, ...option, active }` | Checkbox (if multi) + text |

### Events

This component does not emit custom events. It handles routing internally via `$router.replace()`.

### Data Properties

| Name | Description | Type |
|------|-------------|------|
| isVisible | Dropdown visibility state | `Boolean` |
| requestPage | Current page for API requests | `Number` |
| selectOptions | Processed options array | `Array` |
| observer | IntersectionObserver instance for infinite scroll | `IntersectionObserver` |
| totalOptions | Total number of options from API | `Number` |

### Computed Properties

| Name | Description |
|------|-------------|
| value | Current filter value from URL query (getter/setter) |
| hasNextPage | Whether more pages are available to load |

### Methods

| Name | Parameters | Description |
|------|------------|-------------|
| open | - | Show dropdown |
| close | - | Hide dropdown |
| set | `(id)` | Toggle or set option value |
| reset | - | Clear filter value and close dropdown |
| fetch | - | Load next page of options from API |
| onChangeOptions | - | Process options into selectOptions format |
| onChangeVisibleState | - | Fetch initial data when dropdown opens |

## Related Components

- [AwFilterChosen](./aw-filter-chosen.md) - Display active filters as chips
- [AwFilterDateRange](./aw-filter-date-range.md) - Date range filter component
- [AwFilterMonth](./aw-filter-month.md) - Month filter component
- [AwButton](../molecules/aw-button.md) - Button component used for filter trigger
- [AwDropdown](../atoms/aw-dropdown.md) - Dropdown component used internally
- [AwDropdownButton](../atoms/aw-dropdown-button.md) - Dropdown button component
- [AwCheckbox](../atoms/aw-checkbox.md) - Checkbox component for multi-select
- [AwIcon](../atoms/aw-icon.md) - Icon component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- When setting a value, `page` and `search` query params are automatically removed
- Single mode: setting new value overwrites previous value
- Multiple mode: clicking option toggles it on/off
- Default `parse` function auto-converts numeric strings to numbers
- `isActive` function signature: `(id, value) => boolean`
- Infinite scroll triggers when dropdown end element is visible
- API requests expect paginated response with `data.data` array and `data.meta.total`
- Observer watches dropdown scroll with 200px root margin for early loading
- Dropdown closes on option click in single mode, stays open in multiple mode
- Reset button appears after horizontal rule separator
- Router navigation uses `.catch(F)` to suppress navigation errors
- Component uses Rambdax utilities: `path`, `omit`, `equals`, `F` (false function)
- IntersectionObserver is cleaned up in `beforeDestroy` lifecycle hook
- Custom slot content receives full option object spread as props
- Caret icon rotates 180° when dropdown is open
- All dropdown options have `data-dropdown-scroller` attribute for styling