Sections

Utilities

Forms

Hooks

useIsMobileNew

Autocomplete

Displays a searchable list of options.

Installation


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.

Selected: banana

States

Invalid

Disabled

Sizes

Small

Medium

Large

Examples

Group

With Field

Use Field components to style with the field components.

With clear button

Pass showClear to AutocompleteInput to show a clear button.

With trigger

Pass showTrigger to AutocompleteInput to show the dropdown trigger button.

With start icon

Use InputGroupAddon to add a start icon to the input.

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" \| "lg"`	`"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

Avatar