Blitz UIBlitz UIAlpha
X

Autocomplete

An input that suggests options as you type.

Package
shadcn/ui
API Reference 
import {
  Autocomplete,
  AutocompleteContent,

Installation

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

Usage

import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
} from "@blitz-ui/react/autocomplete"
const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]
 
<Autocomplete items={items}>
  <AutocompleteInput placeholder="Search..." />
  <AutocompleteContent>
    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>}
    </AutocompleteList>
  </AutocompleteContent>
</Autocomplete>

Examples

Disabled

import {
  Autocomplete,
  AutocompleteContent,

Auto Highlight

import {
  Autocomplete,
  AutocompleteContent,

With Label

import {
  Autocomplete,
  AutocompleteContent,

With Clear Button

"use client"

import { useState } from "react"

With Trigger Button

"use client"

import { useState } from "react"

With Trigger and Clear Buttons

"use client"

import { useState } from "react"

With Groups

"use client"

import { useMemo, useState } from "react"

Async Search

"use client"

import { ReactNode, useEffect, useState } from "react"

Size

import {
  Autocomplete,
  AutocompleteContent,

Form

import {
  Autocomplete,
  AutocompleteContent,