controls – Text box with addon selector

I am pretty sure that many of us encounter a similar pattern in everyday life.

Here is an example that I see at least twice a day. Photoshop:

Domains related to Photoshop

And here's what Google does:

Google linked to the fields

Or maybe you are often on Github:

Github related domains

What I mean is that there are many different ways to proceed, and they all work very well. The question to ask yourself is rather "what implementation of this model best fits the rest of my user interface?"

Whatever you choose, be very clear about the following points in the final design:

  • There are two input fields
  • They are of different types
  • They work in unison