how do you call this type of pattern where you first can select the type of a phone number, and then in the next field enter the phone number itself (the phone number being an example). This is well known from modern smartphones and is seen in applications like Apple Contacts on computers as well.

This can also be used for email-adress, etc. It loks like this in the collapsed state, and when you click on the label (eg work) you can select different values:


Edit Thanks

  • 1
    I'd call it a "masque" (or "mask"). – John Mee Jul 3 '14 at 0:09

In HTML, it's a select element and a text input. In iOS, it's a picker and a textfield. I don't know that there is a specific name for the combination of the two.

That said, in HTML they can be linked with some JavaScript / jQuery that changes the placeholder text based on what option is chosen.

I quickly created a jsFiddle demo that demonstrates this functionality:

jsFiddle demo screenshot

  • Sorry, this is not what I meant. The first widget is a dropdown where you can select a type (eg home, private, work), the second widget is a textbox where you can enter a value (eg phone number, email). How would you call that combination of those 2 widgets? – roland_w Jul 1 '14 at 13:55
  • @roland_w - I've updated the answer to reflect your clarification. – Code Maverick Jul 1 '14 at 14:39
  • thanks for the demo. I am actually just curious how this "pattern" is called if (as you say) there IS an actual name for it ... Because calling it "select input next to a text field" all the time is not so cool :) – roland_w Jul 1 '14 at 14:42

Are you looking for a specific name for the combination of these two types of widgets or just a general name for input fields that are linked together? Would your definition also incorporate the country code selector that you often see in front of the phone number input field?

I don't think you need a specific name for the combination of these two types of widgets, since it is a contact detail input form/pattern that can be implemented in a number of different ways. For example, instead of the dropdown you can use a radiobutton group to select the type of input.

I think the abstract pattern would be linked form input fields, much in the same way that a button group links separate radiobuttons or checkboxes together logically. If you want to be even more pedantic, you could say that linked form input fields can be of a heterogeneous nature (like a dropdown linked to a text input field) or homogeneous (like a button group containing radiobuttons).

  • I was really looking just for a name for that pattern, when you use a dropdown to specify what you are going to enter in the attached text field. :) – roland_w Jul 4 '14 at 9:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.