Sections

Components

Utilities

Forms

Hooks

useIsMobile

Autocomplete

Copy Markdown

Displays a searchable list of options.

Docs API

PreviewCode

Search fruits

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/autocomplete

Anatomy#

Autocomplete
├── AutocompleteInput
└── AutocompleteContent
    ├── AutocompleteEmpty
    └── AutocompleteList
        └── AutocompleteGroup
            ├── AutocompleteGroupLabel
            └── AutocompleteItem

Usage#

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteGroup,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
} from "@/components/ui/autocomplete";

const { contains } = useFilter({ sensitivity: "base" });
const { collection, filter } = useListCollection({
  initialItems: [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
  ],
  filter: contains,
});

<Autocomplete
  collection={collection}
  onInputValueChange={({ inputValue }) => filter(inputValue)}
>
  <AutocompleteInput placeholder="Select an option" />
  <AutocompleteContent>
    <AutocompleteEmpty />
    <AutocompleteList>
      {items.map((item) => (
        <AutocompleteItem item={item} key={item.value}>
          {item.label}
        </AutocompleteItem>
      ))}
    </AutocompleteList>
  </AutocompleteContent>
</Autocomplete>

Controlled#

Control the selected value with value and onValueChange props.

PreviewCode

Selected: banana

States#

Invalid#

PreviewCode

Disabled#

PreviewCode

Sizes#

Small#

PreviewCode

Medium#

PreviewCode

Large#

PreviewCode

Examples#

Group#

PreviewCode

With Field#

Use Field components to style with the field components.

PreviewCode

Country

We'll use this for shipping estimates

With clear button#

Pass showClear to AutocompleteInput to show a clear button.

PreviewCode

With trigger#

Pass showTrigger to AutocompleteInput to show the dropdown trigger button.

PreviewCode

With start icon#

Use InputGroupAddon to add a start icon to the input.

PreviewCode

API Reference#

Autocomplete#

Root component.

Prop	Type	Default
`collection`	`ListCollection<T>`	required
`value`	`string[]`	-
`defaultValue`	`string[]`	-
`onValueChange`	`(details: ValueChangeDetails<T>) => void`	-
`onInputValueChange`	`(details: InputValueChangeDetails) => void`	-
`disabled`	`boolean`	-
`openOnClick`	`boolean`	`true`
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`className`	`string`	-

AutocompleteInput#

Input with dropdown trigger and clear button.

Prop	Type	Default
`size`	`"sm"	"md"
`showTrigger`	`boolean`	`false`
`showClear`	`boolean`	`false`
`disabled`	`boolean`	-
`className`	`string`	-

AutocompleteContent#

Holds the dropdown options. Displayed in a portal.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

AutocompleteGroup#

Groups related items. Use with groupBy on the collection.

Prop	Type	Default
`heading`	`string	ReactNode`
`className`	`string`	-

AutocompleteGroupLabel#

Label for a group of options. Use inside AutocompleteGroup.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

AutocompleteItem#

Single selectable option in the dropdown list.

Prop	Type	Default
`item`	`T`	required
`className`	`string`	-
`asChild`	`boolean`	-

AutocompleteEmpty#

Shown when no options match the current filter. Use for empty state.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

For a complete list of props, see the Ark UI documentation.

[

Aspect Ratio ](/docs/components/aspect-ratio)[

Avatar ](/docs/components/avatar)

On This Page

Installation Anatomy Usage Controlled States Invalid Disabled Sizes Small Medium Large Examples Group With Field With clear button With trigger With start icon API Reference Autocomplete AutocompleteInput AutocompleteContent AutocompleteGroup AutocompleteGroupLabel AutocompleteItem AutocompleteEmpty