User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm working on the input style for a dropdown field, and I have two options for once a value has been selected. The default field state is shown at the top, which has the same border color as the empty state. The second option has a border the same color as the value. Which version communicates better?
Consistency is at the center of good UI design
Unless there's a good reason to, the weight and color of the text and the thickness of the input border of a dropdown selector should be the same in all states.
In your case, graying out the text in the "no value" state risks the field being mistaken for one that is disabled, and increasing the thickness of the border could be distracting and increases the risk of technical issues with the layout of your form.
The age old aphorism applies here:
KISS (Keep it simple, stupid)
To me, option 1 is stronger, but your default empty state still suffers from its lack of contrast. It might be mistaken for a disabled state. I suggest making the text a bit darker.
Your second option gives the impression a bit too strongly that the input field is currently in focus. You should reserve border changes (color) to communicate errors and activity.
If you really want to make it obvious something has been selected, you can opt for a checkmark next or inside the input field. If you are worried that people will think it's pre-filled, you can make use of smart defaults.
