UXMovement.com recommends over 15 items in a drop-down should be a text field.

I have a drop-down on a form field, on a web page, which has more (about 40) items to choose from. Dropdown value represents hours, and system can only take a full or half hour measure. On a page, there are ~20 of these drop downs.

They are a series of consecutive numbers and halves. Like this:


download bmml source – Wireframes created with Balsamiq Mockups

I get that if a person needs to pick 20 they have to go down about 40 items, but

  1. I don't want to create an error state
  2. Scrolling down is not that hard.

I also don't want to create 2 separate drop-downs for 0-20 and .0 and .5 because there are rows of these drop-downs on the page, so it will multiply.

What's your better recommendation?

  • See related: ux.stackexchange.com/questions/39860/…
    – Dvir Adler
    May 30, 2013 at 4:51
  • Knowing a bit more about the context would really help - what do the values represent? Are inputs likely to center around a small number of values? I guess the main question is, why don't you want to use a text input box?
    – Peter
    May 30, 2013 at 7:29
  • Numbers represent hour duration. Text input box will create an error state, which I want to avoid, since there are 20 of these on the same page. Sliders will cause too much of visual clutter (imagine 20 slider).
    – Jade
    Jun 6, 2013 at 18:41

4 Answers 4


Sliders are OK, but hard to use for people with limited motor control, such as the elderly. I would consider getting the user to just type the value into an input box. If there are already rows of dropdowns on a page, being able to type in a value would be simpler and be a change in interaction type (using a lot of the same control can be visually unpleasant). Using a slider with an input box can work, but I've found people don't always understand that they can type directly into the input box. You could also include an example that disappears onFocus such as "e.g. 10.5".


Seems like the perfect scenario to use an incremental slider.

Increment slider values with the step option set to a value, commonly a dividend of the slider's maximum value.

enter image description here

check out the jQuery UI Slider

UPDATE: In addition to the slider, a number type input would be more useful (as depicted in the mockup in rk.'s answer)

Check out jsfiddle demo (number input added to rk.'s jsfiddle)

Reference: HTML Input types


A good, balanced alternative would be a slider linked with an input box.


download bmml source – Wireframes created with Balsamiq Mockups

Gives the user the freedom to input a value than fiddling with slider (specially helpful when slider is sensitive/range too big). Also, in terms of universal design, an input box has better accessibility than a slider.

A jsfiddle demo


You might want to investigate on the HTML5 datalist attribute of the input type. It's a free input type text but with a fixed set of possibilities, like the old-school d-HTML search. However, there is some validation/correction required since the user is able to enter something else...


<label for="num">Please select your number : </label><input id="num" name="num" type="text" list="all_numbers" />
<datalist id="all_numbers">
   <option value="1.0">
   <option value="1.5">
   <option value="2.0">
   <option value="2.5">
   <option value="3.0">
   <option value="3.5">
   <option value="4.0">

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.