Web UI for choosing variable or entering constant value
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