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

Once something is selected, "Clear all" appears in the "Filters" heading. It is a menu item, so opening the menu from the keyboard lands on it first; choosing it clears every filter and closes the menu.

## Search

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

The search box sits at the top of the menu and is focused as soon as it opens. It replaces the "Filters" heading and takes `label` as its accessible name, and "Clear all" moves to a footer pinned to the bottom of the menu, shown while something is selected. Options that don't match hide themselves, matching against each option's `label`. <kbd>Enter</kbd> toggles the first match and keeps the menu open.

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

The "Clear all" footer hides while a query is typed, so it never appears as a search result and <kbd>Enter</kbd> can't clear every filter by accident. Clearing the query brings it back; selections made during a search are unaffected.

## Props

| Name                | Description                                                                       | Type                                  | Default             | Required |
| ------------------- | --------------------------------------------------------------------------------- | ------------------------------------- | ------------------- | -------- |
| `label`             | Trigger text, and the search box's accessible name when searchable.               | `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 "Clear all" is chosen.                                        | `() => void`                          | -                   | ✅       |
| `disabled`          | When `true`, the trigger button is unclickable and the dropdown cannot be opened. | `boolean`                             | `false`             | ❌       |
| `searchable`        | Adds in-menu search, focused when the menu opens.                                 | `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`  | ❌       |