Shim

Autocomplete

Combine a search field with a filterable list of options.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Field·Menu·SearchField
Install
pnpm dlx @kkga/shim add autocomplete
"use client";
import { Autocomplete, AutocompleteItem } from "@/shim-ui/autocomplete";

export default () => (
  <Autocomplete>
    <AutocompleteItem>Button</AutocompleteItem>
    <AutocompleteItem>Card</AutocompleteItem>
    <AutocompleteItem>Modal</AutocompleteItem>
    <AutocompleteItem>Tooltip</AutocompleteItem>
    <AutocompleteItem>Dropdown</AutocompleteItem>
  </Autocomplete>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add autocomplete

Content

Autocomplete uses the Menu component underneath and and supports both static and dynamic items.

Pass an items prop and a render function as children to render dynamic collections. The render function receives each item from items and should return a React element.

"use client";
import { Autocomplete, AutocompleteItem } from "@/shim-ui/autocomplete";

let items = [
  { id: 1, name: "Button" },
  { id: 2, name: "Card" },
  { id: 3, name: "Modal" },
  { id: 4, name: "Tooltip" },
  { id: 5, name: "Dropdown" },
];

export default () => (
  <Autocomplete items={items}>
    {(item) => <AutocompleteItem>{item.name}</AutocompleteItem>}
  </Autocomplete>
);

Size

Use size prop to set the size for both the search field and the menu.

"use client";
import { Autocomplete, AutocompleteItem } from "@/shim-ui/autocomplete";

export default () =>
  ([1, 2, 3, 4] as const).map((size) => (
    <Autocomplete key={size} size={size}>
      <AutocompleteItem>Button</AutocompleteItem>
      <AutocompleteItem>Card</AutocompleteItem>
    </Autocomplete>
  ));