I'll create a combobox with autocomplete functionality using shadcn/ui components, similar to Material-UI's Autocomplete component.
I've created a comprehensive autocomplete combobox component using shadcn/ui that mimics Material-UI's Autocomplete functionality 1. Here are the key features:
Key Features:
- Real-time Search: Filters options as you type, searching both labels and values
- Single & Multiple Selection: Supports both selection modes
- MUI-like Interface: Clean, modern design similar to Material-UI
- Badge Display: Shows selected items as removable badges in multiple mode
- Keyboard Navigation: Full keyboard support for accessibility
- Customizable: Configurable placeholder, empty messages, and styling
Usage Examples:
- Single Selection: Perfect for dropdowns where only one option can be selected
- Multiple Selection: Great for tags, categories, or multi-select scenarios
- Search Functionality: Users can quickly find options by typing
The component uses shadcn/ui's Popover and Command components 1 to create a polished autocomplete experience that's both functional and accessible.