Autocomplete

A searchable select input that allows users to filter and select from a list of options

Installation


pnpm dlx shadcn@latest add @shark-ui/autocomplete

Usage


import { 
  Autocomplete,
  AutocompleteInput,
  AutocompleteContent,
  AutocompleteItem,
  AutocompleteItemGroup,
  AutocompleteEmpty,
  AutocompleteItemGroupLabel,
  AutocompleteTrigger,
  AutocompleteClearTrigger,
} from "@/components/ui/autocomplete";


<Autocomplete>
  <AutocompleteInput />
  <AutocompleteContent>
    <AutocompleteEmpty />
    <AutocompleteItemGroup>
      <AutocompleteItemGroupLabel />
        <AutocompleteItem />
    </AutocompleteItemGroup>
  </AutocompleteContent>
</Autocomplete>

Examples

Default

On This Page

Installation Usage Examples Default