Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - Create New Option Inline
A React combobox with inline option creation allowing users to dynamically add new items using Plus icon and CommandEmpty fallback with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Tags need flexibility—create on the fly. This React combobox uses dynamic item creation with Plus icon from Lucide React allowing users to add custom options inline. Built with shadcn/ui Command and Popover featuring CommandEmpty state for new item creation, state management tracking search input, and duplicate prevention. The pattern appears both when no results exist (CommandEmpty) and as action item below results (CommandSeparator)—perfect for tagging systems, custom categories, user-defined options, or anywhere predefined lists need user extensibility without leaving the interface or opening separate creation dialogs.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
With Quick Filters
Badge-based filtering for categorized items
Multi-select Combobox
Multiple selection without creation
With Footer Actions
Management actions in combobox footer
Standard Combobox
Basic combobox without custom actions
Async/Dynamic Search
API-based dynamic results
Dialog
Modal-based item creation
Questions you might have
React Controlled Collapsible
A React controlled collapsible using useState with open and onOpenChange props for external state management and status display with shadcn/ui
React Combobox - With Footer Actions
A React combobox with footer action button using Settings icon and CommandSeparator for management links below selection list with shadcn/ui