Single-select search component

I need a single-select component that allows users to type any character to initiate a server-side search. The search should only trigger when at least 2 characters are entered. Clearly inform the user about this minimum length requirement. If no results are found, display a 'Create item' button as an option within the select dropdown. This 'Create item' option should appear when the input value is between 4 and 25 characters long. Users should be aware of these rules upfront, especially if their primary intention is to create an item directly

Show full message

287d ago

I'll create a searchable single-select component with server-side search and a "Create item" option. This component will clearly communicate the requirements and provide a smooth user experience.

I've created a comprehensive searchable select component that meets all your requirements:

Key Features:

Server-side Search: Only triggers when 2+ characters are entered, with debounced requests (300ms delay)
Clear Requirements Communication:
- Instructions shown above the component
- Real-time status indicators below the input
- Visual feedback for different states
Create Item Functionality:
- "Create item" option appears when no results found and input is 4-25 characters
- Clear validation messages for character length requirements
User Experience Enhancements:
- Loading states during search
- Proper keyboard navigation
- Accessible design with ARIA attributes
- Visual indicators for selected items

Component States:

Initial: Shows instructions and requirements
Typing (< 2 chars): Shows how many more characters needed
Searching: Loading indicator
Results found: Displays searchable items
No results + valid length: Shows "Create item" option
Invalid length: Clear feedback on requirements

The component is fully customizable and includes a demo showing how it works in practice. You can replace the mockSearch function with your actual server-side search implementation.

287d ago

Show full message

287d ago

I'll create a searchable single-select component with server-side search and a "Create item" option. This component will clearly communicate the requirements and provide a smooth user experience.

I've created a comprehensive searchable select component that meets all your requirements:

Key Features:

Server-side Search: Only triggers when 2+ characters are entered, with debounced requests (300ms delay)
Clear Requirements Communication:
- Instructions shown above the component
- Real-time status indicators below the input
- Visual feedback for different states
Create Item Functionality:
- "Create item" option appears when no results found and input is 4-25 characters
- Clear validation messages for character length requirements
User Experience Enhancements:
- Loading states during search
- Proper keyboard navigation
- Accessible design with ARIA attributes
- Visual indicators for selected items

Component States:

Initial: Shows instructions and requirements
Typing (< 2 chars): Shows how many more characters needed
Searching: Loading indicator
Results found: Displays searchable items
No results + valid length: Shows "Create item" option
Invalid length: Clear feedback on requirements

The component is fully customizable and includes a demo showing how it works in practice. You can replace the mockSearch function with your actual server-side search implementation.