I would like to de-emphasise the contents of the following text fields when one of the dropdowns is selected. I do not want to turn them grey as that would suggest they are disabled. They effectively become information when a dropdown is used, but are still available for editing at which point they will become prominent again. What is the best way to achieve this?
We have a web application used for data analysis and you select the time range to look at using two simple text fields (with calendar controls attached):
We are experimentally introducing presets to easily allow selecting of common time ranges. We do not want to remove the existing time fields though in order to allow the selection of arbitrary times if required. They also serve to show the exact time range chosen when a preset is used (as in the example above).
If a preset is picked from the dropdown menu, the text fields are updated to match. If the text fields are edited the dropdown selection is cleared. This means that only one set of controls is in use at any time.
What I would like is that when a preset is selected, the text fields should be de-emphasised somehow, to show that they are not being used. The simplest approach would be to grey out or even disable the controls but I do not want to do this as they are still perfectly usable if needed.
What would be a good way to address this problem?
It may be that I am focusing too much on the text fields. My main goal is to indicate that only one set of controls is in use but that the other set can easily be used. My secondary goal is to also not change the UI too drastically to reduce friction with existing users of the system.