Autocomplete Combobox component supports selection validation?

[dfcontreras10]

Hi! I was wondering if the Autocomplete Combobox component supports selection validation—for example, triggering an error message if the user types a query but doesn't select one of the available options.

Our use case is selecting a country from a list that includes all countries worldwide. It's important that users select a valid option from the list rather than typing it freely, since any typo could break the process. Let me know if there’s a recommended pattern for this. Thanks!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Yes, the Autocomplete Combobox component supports the scenario you're describing, where you can trigger an error message if the user types a query but doesn't select one of the available options. This is a common use case, especially for important fields like selecting a country from a list, where selecting a valid option is crucial.

For implementing validation and error feedback, you can use inline validation errors to prompt the user to select an option from the list. This approach is mentioned in the context of form submission and can be adapted to your use case to ensure users select a valid country. If the user has started typing but hasn't selected anything, you can provide an inline validation error prompting them to select an option from the list.

Here's a general approach on how you might implement this:

1. Monitor the input value and the selection state of the Combobox.
2. On form submission (or when the user moves to another field), check if the user has entered text but hasn't made a selection from the dropdown.
3. If the above condition is true, display an inline error message near the Combobox, prompting the user to select a valid option from the list.

While the documentation doesn't provide a direct code snippet for this exact scenario, the principles of handling state changes and providing feedback based on the Combobox's state are applicable. You would typically manage this through state management in your application, using the onChange and onBlur events of the Combobox to track the user's interaction and validate their input accordingly.

For more detailed guidance on implementing the Combobox component and handling its events, you can refer to the Combobox documentation.

Remember, the key is to ensure a good user experience by providing clear, helpful feedback when the user's input doesn't match the required criteria, such as selecting a country from a list.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Combobox - continuing with an error (updated: 02/17/2021, similarity score: 90%)
• Autocomplete combobox validation (updated: 02/29/2024, similarity score: 90%)
• Combobox Improvements (updated: 08/10/2022, similarity score: 87%)

[serifluous]

Hey @dfcontreras10 , yes, Combobox does support it! Here's a Codesandbox example @krisantrobus put together: https://codesandbox.io/p/sandbox/df62c3?file=%2Fsrc%2Findex.tsx

Another thing we'd recommend is validating the field / throwing an error when a user submits the form, too.

[dfcontreras10]

Sweet!

I'll share this with my Eng team, thank you so much for your answer and for sharing @krisantrobus's sandbox example, that's super helpful!