Shadcn.io is not affiliated with official shadcn/ui
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
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.
Create New Option Inline preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Clear/Reset Button
A React combobox with clear button using X icon enabling one-click selection reset with stopPropagation preventing trigger toggle on clear with shadcn/ui
Keyboard Shortcuts Displayed
A React combobox displaying keyboard shortcuts using kbd element with monospace font and muted styling showing command hotkeys alongside labels with shadcn/ui