Fabric UI

Autocomplete

Fabric UI Autocomplete component for React and Tailwind CSS. An input that suggests options as you type.

Radix UIBase UI
Radix UI
API Reference 
import {
  Autocomplete,
  AutocompleteContent,

Installation

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

Usage

import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
} from "@/components/fabric-ui/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,

More Autocomplete components

Browse 12 production-ready Autocomplete components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and match the Fabric UI visual system.

Browse all 12 Autocomplete components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the Fabric UI library.