I need to give the user a way of entering (at most) three fields. For example, for a list of ingredients for a cooking recipe, each entry has a quantity, a unit and a label, e.g. 2 big egg(s), 1 pinch salt, 50 mL milk, etc. As you can see, some fields are mandatory while others are conditional.

My idea was to use either a textbox or a numeric stepper for the amount, and autocomplete for the unit and the label.

On one hand I would like to keep the types of the entry controls homogeneous (as much as possible), but on the other hand, in the case of units which are a small set, using the autocomplete control seems like an overkill.

What solutions are there?

2 Answers 2


Perhaps another way to think about this problem is how to get the most information from the user from their first input, and use this to make it easier for them to complete the rest of the entry.

With this approach in mind, I would put the ingredient type first, as an autocomplete field, then dynamically restrict the unit dropdown based on the ingredient selected. Therefore, the user enters the information in a logical order (item, amount, unit), and the options available to them change dynamically, before they open the dropdown.

Let's take your examples. The first column is an autocomplete, the second a plain input field, and the third shows the possible options for a dynamically restricted dropdown.

Item     Value     Unit
Milk     50        [ml]

Eggs     2         [disabled]

Salt     1         [g]

For an item that you haven't pre-defined a restricted unit list for (e.g. myrhh), you can just display the full list and allow the user to choose. Hopefully this would be an edge case.

I wouldn't bother making the unit dropdown an autocomplete, unless the number of items is extremely large. The item field does deserve an autocomplete, however, as it is likely to be large.

Going forward, I would inspect the database to identify the most commonly logged items that do not have a hard-coded restricted item list, and use this to improve your application in subsequent releases.


If you feel adventurous, try to parse the text, showing an example next to the text input. In this way, it wouldn't slow down typing.

But technically, it will be a challenge: you'll need to allow several aliases (l = litre = liter), and show errors ("3 milk") or warnings ("4 l mlik").

Another possibility would be to choose ingredients by photo. This would definitely take longer than type it in, but it may be more fun (if the design is pleasing and so on).

  • thanks for your response. I'm afraid I am constricted in space, so there's no much room for examples next to the text input. If I take your idea further, still restricting input with an autocomplete control, and moving the focus once a field is set would be akin to typing the whole thing?
    – Dan
    Aug 19, 2011 at 12:29
  • You can show the input hint only if the input is active. And then, normally autocomplete doesn't restrict you, it only suggests possible values - so you still need to parse plain text. For the ingredients autocompletion may be useful, but not for the units I think.
    – giraff
    Aug 19, 2011 at 12:52

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.