So I am designing a system where you can group different items together. A VNET is a group of edge devices, and in order to get the "TNI/Addr", you need to first select the VNET. I added some lines to separate the disabled item from the rest of this form, but I feel like there is still no visual cue that shows the dependency between the two items. Here is a screenshot/wireframe:

enter image description here

Is there a clearer way to show that the TNI is dependent/enabled once you select a VNET?

3 Answers 3


This article talks about dependent form fields: https://www.uxmatters.com/mt/archives/2007/02/selection-dependent-inputs.php

I think this option works best since it allows you to have as many options in the dropdown as possible, and it simply adds a bounding box without any extra instructions. The UI itself tells the user the relationship between the fields.
enter image description here


You can use the helper text pattern in the form to tell them directly.

Option 1: Helper text only

enter image description here You are already using helper text for the MAC Address input, so you can have the text below telling them specifically what they need to do. This might be enough to give clarity.

Option 2: Group together with a subhead + helper text

To be more clear cut, you can group them together into a small subsection. I've added a subheader to give them context and separation from the other non-dependent inputs:

enter image description here


You can hide TNI/Addr on the form by default, and show it only when the user selects a VNET.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.