# CollectionToolbar

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

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"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

| Prop | Values | Default |
| --- | --- | --- |
| `legendSize · 0.2.10` | `"label" \| "section"` | `—` |
| `hideLabel · 0.2.3` | `boolean` | `—` |
| `hint` | `ReactNode` | `—` |
| `error` | `ReactNode` | `—` |
| `message` | `ReactNode` | `—` |
| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
| `label` | `string` | `Required` |
| `searchValue` | `string` | `Required` |
| `onSearchValueChange` | `(value: string) => void` | `Required` |
| `searchLabel` | `string` | `—` |
| `searchPlaceholder` | `string` | `—` |
| `clearSearchLabel` | `string` | `—` |
| `appliedFilters` | `readonly CollectionFilterSummary[]` | `—` |
| `onRemoveFilter` | `(id: string) => void` | `—` |
| `appliedFiltersLabel` | `string` | `—` |
| `summaryPrefix` | `ReactNode` | `—` |
| `align` | `"stretch" \| "end"` | `—` |
| `quickFilters` | `ReactNode` | `—` |
| `actions` | `ReactNode` | `—` |
| `filterContent` | `ReactNode` | `—` |
| `filtersLabel` | `string` | `—` |
| `filterTitle` | `string` | `—` |
| `filtersOpen` | `boolean` | `—` |
| `onFiltersOpenChange` | `(open: boolean) => void` | `—` |
| `filterPanelRef` | `Ref<HTMLDivElement>` | `—` |
| `filterPanelClassName` | `string` | `—` |
| `onClear` | `() => void` | `—` |
| `canClear` | `boolean` | `—` |
| `clearLabel` | `string` | `—` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `—` |
| `Native HTML props` | `Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "children" \| "legend" \| "onChange">` | `Forwarded` |