# Autocomplete

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

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, 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

| Prop | Values | Default |
| --- | --- | --- |
| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
| `invalid` | `boolean` | `—` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `—` |
| `options` | `readonly ComboboxOption[]` | `Required` |
| `clearable` | `boolean` | `—` |
| `emptyMessage` | `string` | `—` |
| `listLabel` | `string` | `—` |
| `toggleLabel` | `string` | `—` |
| `clearLabel` | `string` | `—` |
| `invalidSelectionMessage` | `string` | `—` |
| `filtering` | `"local" \| "manual"` | `—` |
| `optionsQuery` | `string` | `—` |
| `loadState` | `"ready" \| "loading" \| "error"` | `—` |
| `loadingMessage` | `string` | `—` |
| `errorMessage` | `string` | `—` |
| `onRetry` | `() => void` | `—` |
| `retryLabel` | `string` | `—` |
| `value` | `string` | `—` |
| `defaultValue` | `string` | `""` |
| `onValueChange` | `(value: string) => void` | `—` |
| `onOptionSelect` | `(option: ComboboxOption) => void` | `—` |
| `Native HTML props` | `Omit<Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "value" \| "defaultValue" \| "onChange" \| "children">, "query" \| "onQueryChange" \| "selectedOptions" \| "value" \| "defaultValue" \| "onValueChange">` | `Forwarded` |