Surprisingly I couldn't find something matching this. I need a UX that is NOT auto complete but allows to either choose an existing option or enter a value by typing it.

It resembles <dataList> but I don't want it to filter the option list as I type, rather, always show all options and also allow to manually enter a value.

What's a good design for this?


We did this by using a combination of checkbox lists and input elements. We had a use case where we had to provide a filter by price option to the user, the prices were varied and differed based on the product category. As the user types the desired price, if it matches any of the items in the list the item gets checked.

If not a new checkbox is added with the users' entered price amount (store it as a cookie and show that custom checkbox when he revisits the page).

Users can select the checkboxes manually too,ignoring the textfield.


download bmml source – Wireframes created with Balsamiq Mockups


  • it goes without saying that validation is foremost
  • sometimes the user may not need a particular price range, but that may get inadvertently selected and filtered

I think that input with auto-complete like feature would be just fine. You could make it work like this.

  • When the user types, data following the same naming pattern will be at the top. While the rest of the data list will be still available underneath.
  • User could type and use it as a shortcut to the item he/she is looking for.
  • Pressing enter would save the currently typed entry / or you could add another cell right underneath the input (witch focus) which would read something like "Save current entry"

enter image description here


If you want all the options to be available always, and not filtered out, I think you need a drop down menu with editable field. User can type in their text or simply use the drop down to select a value.

  • I agree about the drop down. Question is - how will the user type in their text? What ui should I provide them for that? Separate from the drop down? – Ben Aug 1 '16 at 15:42
  • Can I see what your interface look like, a snapshot maybe or a link. – Fasih Aug 1 '16 at 16:18

Text field should only be visible only when the option to enter value is selected

We actually tried different options, like using a dropdown. Radio button only made sense. And text field should only be visible only when the option to enter value is selected.

  • Why should the text field only become visible on selection? That's not very discoverable, I wouldn't be surprised if people click the radiobutton and don't even notice that the label has changed because they've moved on to the next form control. Why not have it as a text field and the radio button alongside it becomes seleted if the user clicks into the text field to enter the value? – JonW Mar 6 '19 at 16:38

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.