What library does ReUI Autocomplete use?

`@base-ui/react` Autocomplete. Base UI is the headless component library from the MUI team, offering full WAI-ARIA compliance without any default styles. ReUI wraps it in Tailwind-styled shadcn primitives.

How is Autocomplete different from Combobox and Command?

All three handle selection from a list, but serve different use cases. Autocomplete (Base UI) is optimized for typed search in forms: country pickers, user mentions, tag inputs. Combobox (also Base UI) supports multi-select with chips and dialog embedding. Command (cmdk) is a full command palette with sections and keyboard shortcuts.

Does Autocomplete work with React Hook Form?

Yes. Use Controller from `react-hook-form` to wrap the Autocomplete. Pass value, onChange, and ref from the render prop. Zod schemas validate the selected value via `@hookform/resolvers`/`zod`. The form integration component in ReUI shows the exact setup.

How do I implement async search with Autocomplete?

Debounce the input value change and fire a fetch or SWR revalidation in a useEffect or event handler. Pass the fetched options array as the options prop. Show a loading spinner inside the listbox while fetching: the search results component in ReUI demonstrates this.

Is Autocomplete keyboard accessible?

Yes, fully. `@base-ui/react` Autocomplete manages active-descendant, listbox and option ARIA roles, and keyboard interactions: ArrowDown/Up to navigate, Enter to select, Escape to close and clear, and Tab to move focus. ReUI adds visible focus-ring styles via Tailwind.

Can I show grouped options with section headings?

Yes. The grouped options component sections the option list by category with visible labels. Pass a grouped data structure (array of {group, items}) and render a listbox group element for each section. The ReUI component shows the exact markup and Base UI API usage.

Shadcn Autocomplete

View docs

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.

Basic autocomplete control

Disabled state

Auto highlight option as you type

Control with label

With clear button

With trigger button

With clear and trigger buttons

With groups and labels

With search results

Small autocomplete

Large autocomplete

Form integration

Shadcn 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.

Twelve 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 10+ 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.

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.

Frequently Asked Questions

Shadcn Autocomplete: Base UI Typeahead for React Forms

The sections below explain how ReUI Autocomplete differs from Combobox and Command, real use cases, features, and integration guidance.

Integrating With Other Components

Combine with Shadcn Button for form submission after autocomplete selection, and Shadcn Sonner for async feedback when the selected value triggers a server action.