Autocomplete

Suggests matching options as someone types.

Installation

Install Autocomplete from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/autocomplete

Usage

import {
  Autocomplete,
  AutocompleteValue,
  AutocompleteInput,
  AutocompleteTrigger,
  AutocompleteIcon,
  AutocompleteClear,
} from "@/components/ui/autocomplete"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
Autocomplete	The root component that owns the primary structure and state.
AutocompleteValue	Displays or exposes the current value.
AutocompleteInput	Captures or exposes the current value.
AutocompleteTrigger	Controls opening, selection, or disclosure behavior.
AutocompleteIcon	A composable part of the component anatomy.
AutocompleteClear	A composable part of the component anatomy.
AutocompletePortal	Moves overlay content to a stable document layer.
AutocompleteBackdrop	A composable part of the component anatomy.
AutocompletePositioner	Positions floating content relative to its anchor.
AutocompletePopup	A composable part of the component anatomy.
AutocompleteArrow	A composable part of the component anatomy.
AutocompleteList	A composable part of the component anatomy.
AutocompleteRow	A composable part of the component anatomy.
AutocompleteItem	Represents one option or repeated child.
AutocompleteCollection	A composable part of the component anatomy.
AutocompleteGroup	Groups related items into one logical set.
AutocompleteGroupLabel	Provides a visible label for its related control or value.
AutocompleteSeparator	Visually and semantically separates related groups.
AutocompleteEmpty	A composable part of the component anatomy.
AutocompleteStatus	A composable part of the component anatomy.
AutocompletePrimitive	A composable part of the component anatomy.
useAutocompleteFilter	Reads or controls the component's shared state.

API Reference

Autocomplete exports 22 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

Autocomplete Component
AutocompleteValue Component
AutocompleteInput Component
AutocompleteTrigger Component
AutocompleteIcon Component
AutocompleteClear Component
AutocompletePortal Component
AutocompleteBackdrop Component
AutocompletePositioner Component
AutocompletePopup Component
AutocompleteArrow Component
AutocompleteList Component
AutocompleteRow Component
AutocompleteItem Component
AutocompleteCollection Component
AutocompleteGroup Component
AutocompleteGroupLabel Component
AutocompleteSeparator Component
AutocompleteEmpty Component
AutocompleteStatus Component
AutocompletePrimitive Component
useAutocompleteFilter Hook

Accessibility

Provide Autocomplete with a visible label or an equivalent programmatic accessible name.
Expose disabled, required, selected, and invalid states through the component API instead of color alone, and keep keyboard focus visible.

Source

Autocomplete is maintained by Oros and follows the same conventions as the rest of the library. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Attachment Avatar