---
title: "Filter Dropdown"
description: "A dropdown menu for selecting multiple filter options"
source: "Equality"
---
import { FilterDropdownDemo } from "@demo/components/demo/filter-dropdown";

## Overview

The Filter Dropdown component provides a multi-select dropdown for filtering content in tables or lists. The dropdown menu lists checkbox options that users can toggle on and off, with a "Clear all" action to reset selections within the component. For longer lists, `searchable` adds in-menu search.

## Usage

Import the component:

```tsx
import { FilterDropdown } from "@eqtylab/equality";
```

Basic usage:

```tsx
<FilterDropdown
  label="Scope"
  options={[
    { value: "organization", label: "Organization" },
    { value: "project", label: "Project" },
  ]}
  selectedFilters={selectedFilters}
  onToggleFilter={onToggleFilter}
  onClearAll={onClearAll}
/>
```

## Default

<FilterDropdownDemo client:only="react" />

## Search

Pass `searchable` to add the [Dropdown Menu](dropdown-menu)'s in-place search. It is off by default, reach for it once the list is long enough.

The search box is hidden until the user starts typing with the menu open — the first keystroke reveals it and seeds the query. Options that don't match hide themselves, matching against each option's `label`.

<FilterDropdownDemo client:only="react" variant="searchable" />

Use `searchPlaceholder` to describe what is being searched, and `emptyPlaceholder` for the message shown when a query matches nothing. Both are ignored unless `searchable` is set:

```tsx
<FilterDropdown
  label="Scope"
  options={scopes}
  selectedFilters={selectedFilters}
  onToggleFilter={onToggleFilter}
  onClearAll={onClearAll}
  searchable
  searchPlaceholder="Search teams..."
  emptyPlaceholder="No teams match"
/>
```

The empty message only appears while a query is active — an empty `options` array renders an empty menu rather than this message.

Note that the "Filters" heading and its "Clear all" action are hidden while a search is active, so results stay compact. Clearing the query brings them back; selections made during a search are unaffected.

## Props

| Name                | Description                                                                       | Type                                  | Default             | Required |
| ------------------- | --------------------------------------------------------------------------------- | ------------------------------------- | ------------------- | -------- |
| `label`             | The text displayed on the trigger button.                                         | `string`                              | -                   | ✅       |
| `options`           | The list of filter options to display in the dropdown.                            | `{ value: string; label: string; }[]` | -                   | ✅       |
| `selectedFilters`   | Array of currently selected filter values.                                        | `string[]`                            | -                   | ✅       |
| `onToggleFilter`    | Callback fired when a filter option is checked or unchecked.                      | `(value: string) => void`             | -                   | ✅       |
| `onClearAll`        | Callback fired when the "Clear all" button is clicked.                            | `() => void`                          | -                   | ✅       |
| `disabled`          | When `true`, the trigger button is unclickable and the dropdown cannot be opened. | `boolean`                             | `false`             | ❌       |
| `searchable`        | Adds in-menu search, revealed on the first keystroke.                             | `boolean`                             | `false`             | ❌       |
| `searchPlaceholder` | Placeholder text for the in-menu search input. Requires `searchable`.             | `string`                              | `Search filters...` | ❌       |
| `emptyPlaceholder`  | Message shown when a search query matches no options. Requires `searchable`.      | `string`                              | `No filters found`  | ❌       |