# Autocomplete
A searchable text input that suggests and filters matching options as you type.
## Installation
```tsx
import {
Autocomplete,
AutocompleteInputGroup,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteList,
AutocompleteItem,
} from "@makeplane/propel/components/autocomplete";
```
## Usage
```tsx
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInputGroup,
AutocompleteItem,
AutocompleteList,
} from "@makeplane/propel/components/autocomplete";
import {
Field,
FieldDescription,
FieldError,
FieldLabel,
} from "@makeplane/propel/components/field";
import { Icon } from "@makeplane/propel/components/icon";
import { IconButton } from "@makeplane/propel/components/icon-button";
import { ChevronExpandOutline, CloseOutline } from "@makeplane/propel/icons";
const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];
export default function BasicDemo() {
return (
Container image
}
/>
}
trigger={
}
/>
}
/>
Enter a registry URL with optional tags.
No matches
{(image: string) => (
{image}
)}
);
}
```
## Examples
### Search
```tsx
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInputGroup,
AutocompleteItem,
AutocompleteList,
} from "@makeplane/propel/components/autocomplete";
import { Icon } from "@makeplane/propel/components/icon";
import { IconButton } from "@makeplane/propel/components/icon-button";
import { SearchOutline, CloseOutline } from "@makeplane/propel/icons";
const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];
export default function SearchDemo() {
return (
}
placeholder="Search images"
aria-label="Search images"
clear={
}
/>
}
/>
No matches
{(image: string) => (
{image}
)}
);
}
```
### Grouped
Grouped suggestions render each group under a label; filtering drops empty groups and their headings automatically.
```tsx
import {
Autocomplete,
AutocompleteCollection,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteGroup,
AutocompleteGroupLabel,
AutocompleteInputGroup,
AutocompleteItem,
AutocompleteList,
} from "@makeplane/propel/components/autocomplete";
const GROUPED_LABELS = [
{ label: "Type", items: ["feature", "fix", "bug", "docs"] },
{ label: "Component", items: ["component: editor", "component: sidebar", "component: issues"] },
];
export default function GroupedDemo() {
return (
No matches
{(group: (typeof GROUPED_LABELS)[number]) => (
{group.label}
{(label: string) => (
{label}
)}
)}
);
}
```
### Async
Hand filtering to the consumer with `filter={null}`, drive the lookup from `value`/`onValueChange`, and announce progress with `AutocompleteStatus`.
```tsx
import {
Autocomplete,
AutocompleteContent,
AutocompleteInputGroup,
AutocompleteItem,
AutocompleteList,
AutocompleteStatus,
useFilter,
} from "@makeplane/propel/components/autocomplete";
import { Icon } from "@makeplane/propel/components/icon";
import { SearchOutline } from "@makeplane/propel/icons";
import * as React from "react";
const PROJECTS = ["Design system", "Marketing site", "Mobile app", "Platform API"];
export default function AsyncSearchDemo() {
const [value, setValue] = React.useState("");
const [results, setResults] = React.useState([]);
const [searching, setSearching] = React.useState(false);
const timeoutRef = React.useRef | undefined>(undefined);
const { contains } = useFilter();
React.useEffect(() => () => clearTimeout(timeoutRef.current), []);
return (
{
setValue(nextValue);
clearTimeout(timeoutRef.current);
if (nextValue === "") {
setSearching(false);
setResults([]);
return;
}
setSearching(true);
timeoutRef.current = setTimeout(() => {
setResults(PROJECTS.filter((project) => contains(project, nextValue)));
setSearching(false);
}, 300);
}}
>
}
placeholder="Search projects"
aria-label="Search projects"
/>
{searching
? "Searching…"
: value !== "" && `${results.length} result${results.length === 1 ? "" : "s"}`}
{(project: string) => (
{project}
)}
);
}
```
### Fuzzy matching
A custom `filter` replaces the built-in contains match, so skipped-letter queries (e.g. `ngx`) still find their item.
```tsx
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInputGroup,
AutocompleteItem,
AutocompleteList,
} from "@makeplane/propel/components/autocomplete";
import { Icon } from "@makeplane/propel/components/icon";
import { SearchOutline } from "@makeplane/propel/icons";
const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];
// A subsequence matcher: every query character must appear in the item, in order — so partial or
// skipped-letter queries ("ngx", "pstgrs") still find their item.
function fuzzyMatch(item: string, query: string): boolean {
const needle = query.trim().toLowerCase();
if (needle === "") {
return true;
}
let matched = 0;
for (const char of item.toLowerCase()) {
if (char === needle[matched]) {
matched += 1;
}
if (matched === needle.length) {
return true;
}
}
return false;
}
export default function FuzzyMatchingDemo() {
return (
}
placeholder="Search images"
aria-label="Search images"
/>
No matches
{(image: string) => (
{image}
)}
);
}
```
### Sizes
`size` steps the input row's height, padding, and icon and text scale: `md`, `lg`, `xl`, or `2xl`.
```tsx
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInputGroup,
AutocompleteItem,
AutocompleteList,
type AutocompleteSize,
} from "@makeplane/propel/components/autocomplete";
import { Field, FieldLabel } from "@makeplane/propel/components/field";
import { Icon } from "@makeplane/propel/components/icon";
import { IconButton } from "@makeplane/propel/components/icon-button";
import { ChevronExpandOutline } from "@makeplane/propel/icons";
const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];
const SIZES: AutocompleteSize[] = ["md", "lg", "xl", "2xl"];
export default function SizesDemo() {
return (
{SIZES.map((size) => (
{size}
}
/>
}
/>
No matches
{(image: string) => (
{image}
)}
))}