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

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

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.

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