My users need to input a number. For this, I would like a control that is a textbox for the numerical input and a section on the end of the textbox that indicates a default unit of measure, similar to Bootstrap's appended inputs. Also, the user can click the addon section to change the unit of measure.

Is this a good idea? Is there a control out there that does this already?

Update: I did a quick mockup in jsBin that shows what I'm thinking. http://jsbin.com/ivafag/1


download bmml source – Wireframes created with Balsamiq Mockups


download bmml source

3 Answers 3


I'm pretty sure a lot of us run into a similar pattern on a daily basis.

Here's an example I see at least a couple of times a day; Photoshop:

Photoshop related fields

And this is what Google does:

Google related fields

Or maybe you're on Github a lot:

Github related fields

My point is, there are many different ways of doing this, and they all work just fine. The question to ask yourself is rather "what implementation of this pattern fits in best with the rest of my ui?"

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

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

You definitely see it around the web in many forms (see below). I'm not sure it has an official name, but I would probably call it a Unified Input.

Make sure there is an arrow or something next to the dropdown text to make it clear to the user that it IS in fact a dropdown. You'll notice all the examples below follow this pattern. I think the arrow is part of what differentiates it from a traditional "Prepended or appended input".


download bmml source – Wireframes created with Balsamiq Mockups

Examples from around the web:

Twitter Bootstrap's Button Dropdowns as Field Add-ons

Google Search Conversions

GitHub Search

Facebook Status Update


Yes, this type of split control is used extensively in Microsoft Office 2013. I don't think it is used as commonly in websites because in general you want to keep these types of applications as simple as possible (both from functional and design perspective). However, I think many people can see the benefit of employing this type of user interface element to provide a richer interaction. Unless it is designed in the Microsoft 'flat' style, you don't need to provide very heavy design cues for the user since they will understand a combination of standard user interface controls.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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