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
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:
Clear Requirements Communication:
Create Item Functionality:
User Experience Enhancements:
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.