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:

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

Basic usage:

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

Default

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 ’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. toggles the first match and keeps the menu open.

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:

<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 can’t clear every filter by accident. Clearing the query brings it back; selections made during a search are unaffected.

Props