Skip to content

Components

Autocomplete

Component reference

Properties

Use Autocomplete

A free text field with optional suggestions; accepts values outside the list.

Example import style
autocomplete.tsxTSX
"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <Field label="Team">{control => <Autocomplete {...control} name="team" options={[{value:"design",label:"Design",group:"Product"},{value:"engineering",label:"Engineering",group:"Product"},{value:"operations",label:"Operations",group:"Business"}]} />}</Field>
    </FloodRoot>
  );
}

Design notes

  • The submitted value is text, not an option ID. Use Combobox for fixed choices.
  • Manual suggestions use controlled value and optionsQuery; stale results cannot be chosen. Network ownership remains with the host.

API reference

PropValuesDefault
status"error" | "warning" | "success" | "info"—
invalidboolean—
controlSize"sm" | "md" | "lg" | "xl"—
optionsreadonly ComboboxOption[]Required
clearableboolean—
emptyMessagestring—
listLabelstring—
toggleLabelstring—
clearLabelstring—
invalidSelectionMessagestring—
filtering"local" | "manual"—
optionsQuerystring—
loadState"ready" | "loading" | "error"—
loadingMessagestring—
errorMessagestring—
onRetry() => void—
retryLabelstring—
valuestring—
defaultValuestring""
onValueChange(value: string) => void—
onOptionSelect(option: ComboboxOption) => void—
Native HTML propsOmit<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "children">, "query" | "onQueryChange" | "selectedOptions" | "value" | "defaultValue" | "onValueChange">Forwarded
View TypeScript source