Select Lists
Last updated: September 14, 2015 at 20:31 pm

Drop downs which restrict the potential input responses for form fields. While a select list can contain a large number of items, only one value can be selected.

Visual example of the element:

What problem does this element or pattern solve?
This field type is commonly seen when users must choose a single response from values commonly shared by all users, such as state, country, or credit card type.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Consistency is key when defining select lists. The fields which present select lists, their visual styling, labels, label order, and values should be perfectly consistent from form to form.
  • What is the sort order for your select lists? Is it always alphabetical? Or are more popular selections placed near the top to minimize the need for scrolling? Again, consistency is important. If you present a list of countries in alphabetical order in one form, you should not present that list on another with your home country listed first.
  • If your form is restricted to a small area, will you specify a fixed size for your select list and permit scrolling within it?
  • How are select lists displayed on various mobile devices?
  • Do you have special visual styling, such as fonts and visual affordances for your select lists? Or do you always use the browser or OS default styling?

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
drop-down, dropdown menu, pop-down menu, pull-down menu, selection list, drop-down list, pull-down list
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply