I've done some research and noticed that a large number of successful eCommerce sites use a drop-down box for the 'expiration date' and other sites use a small text-box that allows for 2 or 4 characters with 'MM' or 'YYYY' greyed out.

What do you think is better UX-wise? Drop-down or small text-box? Do you have any research/case studies/AB tests to back this up?


For this task, Dropdowns are more suitable in any perspective:

  1. Sense of security: Most unexperienced users feels uncomfortable when they have to fill a text input. While making mistakes by choosing an option from a Dropdown is nearly impossible, a free text field needs the users attention to complete the tasks right.

  2. Speed: Experienced users often prefer to navigate with keys instead of using the mouse. For those both solutions should work fine as you can jump to a Dropdown and select an options just by start typing as well. An unconfident user will be a bit faster choosing an option instead of typing as he don't has to think about the input pattern.

  3. Validation: The only possible mistake is to make no selection. Therfore, your validation can be a lot simpler.

The key to success is to make the user understand which pattern you want him to enter. Always use MM / YYYY as placeholders to make this clear.

  • I agree with #1 but disagree with #2. I usually tab with text boxes but I never tab with drop-down boxes. Validation is not a concern for me in this particular case, but a good point. Good point about MM / YYYY Jun 3 '13 at 2:06
  • I disagree with #3...Your validation should not be tied to the format in which data is entered....And even if you do use drop-downs, there is always a potential for programmatic error Jul 15 '15 at 19:58

There are 2 parts to this: ease of entry, and accuracy of input. Comparing ease of entry with a dropdown and a text box, a dropdown requires more, and different actions: select dropdown, optional scroll of mouse, click to select. Repeat for each date component needed. For a text box, the user clicks on the text box and enters the information.

In terms of accuracy: the dropdown and text box are roughly the same: the dropdown can constrain input, but the text box can prefill with example text such as mm/dd/yyyy (which disappears onFocus) and validate, including allowing multiple separators.

Personally I would use a text box, based on better ease of entry.

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