CollectionToolbar

Use CollectionToolbar

Search, applied filter summaries and filter disclosure in one collection query row.

"use client";

import { FloodRoot, CollectionToolbar } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <CollectionToolbar label="Project collection" searchValue="" onSearchValueChange={(search) => console.log(search)}
        searchLabel="Search projects" appliedFilters={[{id:"status",label:"Status: Active"}]}
        onRemoveFilter={(id) => console.log(id)} onClear={() => console.log("clear")} />
    </FloodRoot>
  );
}

Design notes

• Composes Fieldset, Field, SearchInput, Inline, Tag, Popover, Button and IconSlot. Uses normal Tab order rather than the action-only Toolbar roving model. No additional material, title or result count is invented.
• searchValue and accepted appliedFilters are host-owned. onSearchValueChange, onRemoveFilter and onClear request changes; callbacks do not imply acceptance. Summaries need meaningful labels and unique IDs.
• filterContent supplies the existing filter editor, including FilterGroup or a project-specific form. The host retains draft validation, Apply/Cancel, query evaluation, persistence and saved views. filtersOpen/onFiltersOpenChange optionally control the existing Popover; filterPanelRef and filterPanelClassName support real panel focus and sizing.
• Clear keeps its space immediately before the right-anchored Filters trigger while inactive. Removing a summary or clearing returns focus to Filters, or Search when no panel exists. Filter disclosure is omitted when no filterContent is supplied.
• quickFilters is an optional slot for at most two task-important properties; larger property sets belong inside filterContent. The host owns the threshold and slot behavior. Supply canClear when active state is not represented by searchValue/appliedFilters, such as controls in that slot.
• Search, accepted summaries and commands share a responsive row. The actions slot places table commands, such as Columns, next to Filters. Saved-view selectors and save/rename actions stay outside this query row.
• Use align="end" when a sibling such as a view selector or status switcher occupies the start of the row. Search, quick filters, summaries and commands form an end-aligned group and wrap in their original order as space runs out.
• controlSize defaults to sm; action/field sizes and chip typography follow the shared family. disabled applies to the complete fieldset, including native quick-filter controls and panel descendants. Labels and summaries remain host-localizable.

API reference