CollectionViewSwitcher

Use CollectionViewSwitcher

A controlled view selector with adaptive commands, separate from the active filter query.

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <CollectionViewSwitcher label="Project view" views={[{id:"all",name:"All projects"},{id:"active",name:"Active projects"}]} value="all" onValueChange={(id) => console.log(id)} actions={[{id:"create",label:"Save as new view"}]} onAction={(id) => console.log(id)} />
    </FloodRoot>
  );
}

Design notes

• Compose Field, Select, Button, IconSlot, Inline and OverflowActions. controlSize defaults to sm; no extra surface surrounds the selector and commands.
• value and onValueChange represent the accepted view ID. Commands request onAction(id); the component does not create, rename, delete, persist or execute queries. Keep application errors and confirmation in their existing host owners.
• The host supplies only applicable actions: save a new definition, update an editable changed definition, reset a dirty query, rename or delete an editable definition. A dirty working query does not silently modify the selected definition.
• One action uses Button directly. Multiple actions use priority-based OverflowActions with View actions disclosure at constrained widths. Source order remains meaningful; destructive actions belong last.
• label names the hidden Field label. actionsLabel and moreLabel localize command names; views supply localized names. selectRef exposes the Select focus target for host-owned dialogs. disabled blocks selection and commands; per-view and per-action disabled flags remain supported.
• Keep this row outside CollectionToolbar. Changing the selected view may reset the host query and selection, but saving or renaming a definition must not reset unrelated result selection.
• The command rail uses the shared plain Toolbar variant so its outer height matches the adjacent Select, without a second container around the actions.

API reference