Web UI for choosing variable or entering constant value

Question

I'm working on a form where each field can be filled either with variable from list (that can be pretty large) or constant from user input.

For example, I received from backend list of variables: PrimaryColor, SecondaryColor. On form there is a field "Color". And I can fill it with one of variables or manually type any color (e.g. #555555).

Of course, I could use input with autocomplete or select with dynamic option creation like select2. But these components means adding the same entity that has in list already (variable name in my case).

I'm thinking of adding option like "enter value" in list of variables. And when user chooses it, other field appeared.

I think it's okay with one or two fields on form. But in my app forms can contains many fields. And more than that fields can be with different types. So the second field can be text input, select, datetimepicker and etc, while variables are just a list of string.

Our team doesn't have designer, so I tried to google some examples. But I wasn't able to find any suitable. Is there a good design for this?

Thanks

Answer 1

You can keep the 2nd field visible but disabled. And enable it only when the 1st field is open ended.

Try showing it side by side, so the user knows they are related.

Answer 2

A text input field with an accompanying auto-suggest popup (acting as a dropdown) is a neat way to consolidate a solution to your problem into a single widget.