I'll create a combobox component that allows users to select from existing options or add new values dynamically.
This combobox component provides a flexible interface where users can:
Key Features:
- Search & Filter: Type to search through existing options
- Add New Values: When typing something that doesn't exist, a "+ Add [value]" option appears
- Dynamic Options: New options are automatically added to the list and can be selected
- Visual Feedback: Shows selected value and all available options with highlighting
- Keyboard Navigation: Full keyboard support for accessibility
How it works:
- Users can click the combobox to see all available options
- Typing filters the existing options in real-time
- If the typed value doesn't match any existing option, an "Add" option appears
- Clicking the add option creates a new entry and selects it
- The new option becomes available for future selections
The component uses shadcn/ui's Command and Popover components for a polished, accessible experience with proper keyboard navigation and ARIA attributes.