Shadcn Autocomplete
Browse 12 production-ready shadcn autocomplete components using @base-ui/react Autocomplete. Covers basic typeahead, auto-highlight, grouped options, clear and trigger button variants, form integration with React Hook Form and Zod validation, and sizes: built for search inputs, filter fields, and form controls in React and Next.js apps.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
When to use
- Search and filter fields that suggest matching options while the user types
- People and record lookups, grouped by team or fetched from a server as the query changes
- Form fields whose typed or picked text is validated with the rest of the form on submit
When not to use
- A selection that stores the chosen option rather than typed text, or several as chips: use the Combobox component
- Options nested in levels that the user drills into one level at a time: use the Cascader component
- A palette of app actions and keyboard shortcuts, often opened in a dialog: use the Command component
Agent notes
valueandonValueChangecarry the input text as a string; picking an item only fills that text and stores no item object- Both twins are built on
@base-ui/react, so installing it in a radix project adds Base UI as a dependency - A Server Component cannot create the function child of
AutocompleteList, so the file that renders it needs a use client directive
Third-party API docs
- Base UI v1: API reference, docs, llms.txt
- Sonner v2: API reference, docs, used by 1 of 12 examples
- React Hook Form v7: API reference, docs, used by 1 of 12 examples
- React Hook Form resolvers v5: API reference, docs, used by 1 of 12 examples
- Zod v4: API reference, docs, used by 1 of 12 examples
https://web.dev.reui.io/components/autocomplete.mdget_component("autocomplete")npx shadcn@latest add @reui/autocompleteShadcn Autocomplete: Base UI Typeahead for React Forms
ReUI Autocomplete is built on @base-ui/react Autocomplete: the headless, WAI-ARIA-compliant autocomplete primitive from the Base UI library. It manages listbox open state, active option highlight, keyboard navigation (arrow keys, Enter, Escape), and screen reader announcements without any CSS assumptions.
12 components cover basic typeahead, small and large size variants, auto-highlight on keystroke, grouped options with section labels, clear button, trigger button, combined clear and trigger, search results layout, form integration with React Hook Form, and Zod schema validation.
The sections below explain how ReUI Autocomplete differs from Combobox and Command, real use cases, features, and integration guidance.
What is Shadcn Autocomplete?
ReUI Autocomplete is a custom shadcn component built on @base-ui/react's Autocomplete primitive. It is distinct from the shadcn Command component (which is a full command palette) and from the Combobox (which is built on a different Base UI primitive). Autocomplete is optimized for form fields and search inputs where the user types to filter a list: such as country selectors, user mention inputs, tag inputs, and address autocomplete.
The component wraps the Base UI Autocomplete with shadcn Field, Label, and Input styling, inheriting your design tokens. ScrollArea handles long suggestion lists without a fixed-height overflow container. Components show Autocomplete inside form layouts with React Hook Form and Zod validation, displaying field-level errors inline.
Why Use Shadcn Autocomplete?
Search inputs, tag selectors, and filtered dropdowns all benefit from a fully accessible autocomplete that manages focus, keyboard navigation, and ARIA without custom code. @base-ui/react's headless primitive handles all WAI-ARIA combobox semantics: active descendant management, listbox role, option roles, and live region announcements: leaving styling entirely to Tailwind.
React Hook Form integration means autocomplete values participate in form validation, dirty-state detection, and submit handling. Zod schemas validate selected values server-side and client-side with the same schema. Pair with Shadcn Field for accessible label and error message composition.
Libraries and ReUI Autocomplete Primitives
ReUI Autocomplete imports @base-ui/react for the headless Autocomplete primitive, react-hook-form for form state management, @hookform/resolvers for Zod adapter wiring, Zod for schema validation, and Sonner for async submit feedback.
It is distinct from cmdk (Command) and is optimized for typeahead in forms and filters rather than full command palettes.
Shadcn Autocomplete Features
- Base UI Autocomplete Primitive. Built on @base-ui/react Autocomplete. Full WAI-ARIA combobox implementation with active-descendant management, listbox and option roles, and Escape/Enter/Arrow key handling out of the box.
- Auto-Highlight on Keystroke. The auto-highlight variant immediately highlights the first matching option as the user types, reducing the number of keystrokes needed to select a result in familiar lists.
- Grouped Options with Section Labels. Options group into labeled sections: useful for categorized search results, country + dial code pickers, and any list where options naturally cluster by type.
- Clear and Trigger Button Variants. Optional clear button removes the selected value; optional trigger button opens the listbox on click like a select. Combine both for a hybrid input that supports typed search and click-to-browse.
- React Hook Form Integration. Wraps in a Controller for full React Hook Form compatibility: value, onChange, onBlur, ref, and error state all wire through the standard register API. Form-level and field-level validation work without extra adapters.
- Zod Schema Validation. Pair with @hookform/resolvers/zod to validate autocomplete values against a Zod schema. Inline field errors display via shadcn Field's error slot on failed validation.
- Size Variants. Small, default, and large size variants match the sizing scale of shadcn Input. Use small in dense filter toolbars and large in prominent search bars.
- ScrollArea for Long Lists. Suggestion listbox uses shadcn ScrollArea for overflow. Long option lists scroll without a fixed-height container hack, and the scroll bar inherits your theme styles.
ReUI Autocomplete: In-House Custom Shadcn Component
ReUI Autocomplete is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project: following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Autocomplete is built on @base-ui/react Autocomplete: a primitive not available in base shadcn/ui. It handles WAI-ARIA combobox semantics, listbox state, keyboard navigation, and screen reader announcements while leaving all styling to Tailwind CSS and your design tokens.
The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling: only the underlying headless primitive differs. ReUI maintains 22 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.
Integrating With Other Components
Always wrap Autocomplete in Shadcn Field with a Shadcn Label for accessible labeling and inline error messages. Use Shadcn Input Group when you need a leading icon or trailing action button alongside the autocomplete input.
For multi-select with chip display, use Shadcn Combobox instead: it is the Base UI-powered multi-select variant optimized for tag inputs and multi-value fields. For full command palettes with sections and actions, use Shadcn Command.
Combine with Shadcn Button for form submission after autocomplete selection, and Shadcn Sonner for async feedback when the selected value triggers a server action.
Form Blocks in ReUI Pro
The free examples above pair with 12 production ready form blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.
- Form (12 blocks)Form layouts for settings, profiles, and data entry with validation and grouped fields.
Frequently Asked Questions
What library does ReUI Autocomplete use?
How is Autocomplete different from Combobox and Command?
Does Autocomplete work with React Hook Form?
How do I implement async search with Autocomplete?
Is Autocomplete keyboard accessible?
Can I show grouped options with section headings?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.