127 Components
Autocomplete
InputsCustomizable search combobox with instant filtering, grouped categories, keyboard navigation, and spring-animated dropdown results.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/autocomplete.json"
Props
TypeScript props supported by <Autocomplete />.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | AutocompleteOption[] | DEFAULT_OPTIONS | Array of options with value, label, optional description, icon, and category. |
| value | string | — | Controlled selected option value. |
| defaultValue | string | "" | Initial selected value when used as an uncontrolled component. |
| onChange | (value: string, option: AutocompleteOption | null) => void | — | Callback triggered whenever the user selects or clears an option. |
| label | string | — | Optional visible label rendered above the combobox. |
| placeholder | string | "Search options..." | Placeholder text shown when no option is selected. |
| emptyMessage | string | "No matching results found." | Message displayed when no options match the search query. |
| clearable | boolean | true | Displays a clear button when an option is selected. |
| disabled | boolean | false | Disables user interaction with the combobox. |
| className | string | — | Additional CSS classes applied to the outer wrapper. |
Key Features
- Real-time filtering across labels, values, descriptions, and categories.
- Full ArrowUp, ArrowDown, Enter, and Escape keyboard navigation with auto-scroll.
- Supports grouped option categories, descriptions, and one-click clear.
Keyboard & Accessibility
- Implements ARIA combobox, listbox, and option roles with unique aria-controls ID.
- Supports full keyboard operation without requiring a mouse.
- Respects prefers-reduced-motion for dropdown open/close transitions.