CommandList

Use CommandList

CommandList is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <CommandList label="Search commands" items={[{id:"new",label:"New project",group:"Projects"},{id:"settings",label:"Open settings",group:"Workspace"}]} onAction={id => console.log(id)} />
    </FloodRoot>
  );
}

Design notes

• CommandList invokes actions; Combobox and MultiSelect edit form values. A command list has no submitted name or persistent selected value.
• Typing filters labels, descriptions, group names and keywords. Arrow keys, Home/End and Enter navigate and invoke enabled commands. Escape remains available to a host Dialog.
• Use query/onQueryChange for host ownership or defaultQuery for local filtering. Loading blocks stale invocation and exposes an announcement; the host owns asynchronous work and cancellation.
• The ref targets the native search input. Native div props target the wrapper. Translate labels, placeholder, emptyMessage and loadingMessage; hideLabel preserves the search name. No modal, global shortcut or router integration is implied. Introduced in 0.2.7.

API reference