Drop Down List Box

A drop down list box is an input control that lets users select one value from a list of options.

Also known as: droplist, dropdown, drop down list, select input

Example

See the Pen Select Input by SHC-FED (@SHC-FED) on CodePen.0

Design Specs

Desktop/Tablet/Mobile

Dropdown list spec

  1. Drop down field boxes are 36px in height. The background color is #eeeeee with a #d0d0d0 drop shadow of 2px around bottom of the box.
  2. Text inside the drop down box list is Open Sans Regular in #001733. There is 14px of padding around button text. The down arrow icon is pulled from the Sears icon font library.
    • For Desktop, the font size is 15px.
    • For Mobile, the font size is 16px.
  3. In open state, styling follows the browser default.

Not Shown:
  • Field Labels are Open Sans Semibold in #001733
    • For Desktop, the font size is 15px.
    • For Mobile, the font size is 16px.


Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

Production Examples

  • Sears
  • Kmart

Mobile

Desktop/Tablet

More Production Examples

Mobile

Desktop/Tablet

When Do I Use This?

A dropdown list box should be used when you want to provide users to select one option from a long list (5 or more, including the default instructional option). They take up less real estate than a list of radio buttons. Because the selections are only revealed once a dropdown list is interacted with, radio buttons are recommended where space and the number of selections allows.

Usage Guidelines

1. Page View Control

When used as a filter or view control, dropdown list boxes should display a default value and have a label providing directions. (e.g. View By). The label should be Title Case

Display a label when used as a view control. Shown: label on top or horizontal for real estate purposes

This is confusing without a label for context.

2. Data Entry

When used for input or data entry, dropdown list boxes should have their list name as the default value (e.g. State, Month, Day, Year) Exception: if the user has made an applicable selection previously in the flow, display that selection.

Use the list name as the default value.

Don't default to the first selection, or to helper text

3. Order of Selectable Items

Dropdown list box options should be in a logical order (alphabetical, numerical, usage).

Dropdown list with months in numerical order

Dropdown list with months in order starting in September

4. Selection Only

Dropdown list boxes shouldn't be used to perform commands or to open other windows / modals.

Dropdown list is reserved for selection only. The link is used to "add new address".

"Add new address" opens modal for adding a new address

ADA Compliance

Drop down lists need to be accessible for screen readers and people that only use the keyboard for navigation. When designing a drop down list, the user should be able to tab on and off the list so that they can continue to interact with the rest of the current page. In addition, users need to be able to open and interact with the drop down list by pressing control + down arrow to open the list, and the up and down arrow to navigate the opened list. When keystrokes are not provided to open or change values in the drop down list, screen readers and people that only use the keyboard for navigation may not be able to make a selection in the drop down list and therefore may not be able to perform an action or complete a form. Source: Web Accessibility

Helping Links:

Rationale

A drop down list box is an input control that lets users select one mutually exclusive value from a list of options while conserving space on a page. The page remains simplified, yet allows the user to see the suppressed values. The arrow communicates the ability to select another value. This is a prevalent and well understood pattern - a good example is the Microsoft Windows Operating System. It is a standard HTML element.
We apply our own light styling to the generic drop down style provided by the browser to align this pattern with the overall look and feel our site. If for some reason our own styling does not load as intended, the fall back should be the default browser styling.

Research

Microsoft Best Practices for Dropdown lists and Combo boxes

Is there a default option that is recommended for most users in most situations? Is seeing the selected option far more important than seeing the alternatives? Consider using a drop-down list if you don't want to encourage users to make changes by hiding the alternatives. If not, consider radio buttons, a single-selection list, or an editable list box, which give more emphasis to the alternative choices.

view article

Comments

  1. Carlos M Torres

    Specs for the arrow in the dropdown need to speak more in detail about the space between the text and the arrow. Also, in the PSD or library element the arrow should represent the SHC font. Currently it’s a graphic.
    As for the shadow under button, it states 4px, but this is for retina. Should be 2px for regular screens.

    1. Aislinn Hernandez

      Thank you for the feedback, Carlos! I have updated the specs to reflect the correct shadow weight at 2px. I’ve also updated the arrow to be the proper icon from the SHC font library in both the psd downloads on this page as well as within the Adobe CC library. I am looking into the corner radius size to make sure the correct radius is shown on this page. Any other feedback you can think of, please let us know. Thanks!

  2. Carlos M Torres

    Forgot one thing… seems that the round corner radius is pretty large compared to all other round-corner elements in the library…

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.