Multiple select fields

Question

I am trying to allow users to select something that has two names (one numerical and one text):

1. Reference number
2. Name

Reference number is required when adding but the name is an optional additional field. When both added, they are connected. A reference number can be added with no name, but you can't add a name without a reference number. I have the facility to add, but selecting is more of an issue.

I currently have two separate selects and was going to apply logic that if one was selected that is connected to other, it will select the other.

Ideally looking for an alternative better solution..

Answer 1

The screenshot you provided apparently shows the process of storing a meter value with its optional name.

I actually see no greater problem with that. You offer two inputs, you labeled the seconds one "(optional)". The user can decide which field to fill out first.

What you need is some place where to check if the data provided is valid. That is: A optional name is not provided alone. You can do it on the "+ Add Meter" click. Or you need to provide an "OK" button of sorts to do that.

Alternatively, if the user fills the optional field first, you can indicate the missing required value by highlighting it. Several options can be used: change border, background or prompt text inside the text field or show a message below the text field.

I would favor the "OK"-Button approach if possible. Because the normal case could be that a user fills in the optional field first. Why bothering the user with something "shi knows" or "plans" to solve anyway. Over-promoting "error" states which actually are none in the end state, is not favorable actually.