How to design mutually exclusive textfields?
I'm redesigning a number of forms, each containing different contents. The structure is the same, a header at the top, some fields and a search button. Some of the forms allow the user to search in two ways, based on an ID or a Name. The images show the current implementation: using radio buttons the user can choose which way they want to do the search and the field is updated.
In some forms this pattern occurs with more fields attached to the name such as date of birth and address to make it easier to identify the correct person. IDs are unique so no additional fields are necessary. In other forms it is just the one field as in the examples above.
The two textfields, 'Person Name' and 'Person ID' are mutually exclusive. In the current implementation 4 components (2 radios, 2 textfields) are used to handle the simple choice of using either the name or the ID to do a search. Are there other ways of solving this using less components? (and ideally not hiding anything)
Possible solutions (which I don't like / not possible)
- Use the same textfield for both values (data is passed on to third parties, there is no way to distinguish between names and IDs locally)
- Use tabs (Don't like it as in some cases it contains only one field)
Edit: To help clarify why we can't distinguish between IDs and Names, there are also forms where it's not about persons but about companies. Company names can have numbers and symbols which makes it nearly impossible. The queries are fired directly to third parties some of which take several minutes to return, hence no autocomplete can be done.