Skip to main contenteBay Playbook

Select list

v4.0

Select list is a web-only, form-based component that discloses a simple list of actions or options using the browser’s native <select> element.

  • CSS
  • Marko
  • React
Stylized artwork of a select list.

Anatomy

Select list diagram with 4 elements numbered: 1. Label, 2. Value, 3. Disclosure indicator, 4. Container.
  1. Label
  2. Value
  3. Disclosure indicator
  4. Container

Properties

Label

Required. The label names the category of options in the list.

  • Use sentence case
  • No ending punctuation
  • Use a noun or noun phrase
  • Aim for 1–3 words
A select list with a ‘Date range’ label.

Values

The value is the option the user selects. Each option should be short, distinct, and parallel.

  • Use sentence case, except for proper nouns or branded terms
  • No ending punctuation
  • Use numerals for numbers
A select list with a ‘schedule’ label. A dropdown menu displays ‘daily’, ‘weekly’, and ‘monthly’.

Default value

The default value is what the select list shows before user makes a selection. It can be empty or set to a pre-selected value.

Empty value (default)

  • If the field is required, users must make a selection before submitting

Pre-selected value

  • Use if there’s a strong, context-appropriate default value, such as the most common or expected choice
  • The pre-selected value will be submitted if the user never interacts with the field
  • The pre-selected value may or may not be listed first
Two select lists. One showing an empty value and one showing a pre-selected value.

Label position

The label can be positioned above or beside the field.

Related fields in the same form or group should use the same label position. Consistent label placement helps users scan and compare fields quickly.

Two select lists. One showing a label position above and one showing a label position beside the field.

Label visibility

The label can be visible or hidden.

A visible label is strongly recommended to maintain accessibility and usability. However, if content elsewhere on the page is sufficiently acting as a label, like a section header or title element, the visual label can be hidden.

A select list with a ‘Date range’ section title.

Style

There are two styles available for select lists, bordered and Borderless.

Bordered: has a visible container with a stroke for increased prominence.

Borderless: has no visible container for lower prominence.

Two select lists. A select list in a container is sitting to the left of a borderless select list.

Size

Select lists are available in a large and small size.

Two select lists. A select list in a container is sitting to the left of a borderless select list.

Behavior

Browser styling

The list style is determined by the browser and platform.

Three select lists. Select lists on Safari on Mac showcase a dropdown that hovers over the select list container, with a checkmark value for the option selected. A select list on Safari on iOS showcases a dropdown that sits below the select list container, with a checkmark value for the option selected. A select list on Chrome on Android showcases a dropdown that sits below the select list container, with a radio button assigned for each option.

Screen sizes

Small

Select works the same across all screen sizes. The list menu style is determined by the device’s browser and operating system.

A Color select list with 5 option values on the eBay mobile app.

Medium and large

Select works the same across all screen sizes. The list menu style is determined by the device’s browser and operating system. Larger screens will try opening the list with the selected value aligned with the field’s value.

A Color select list with 5 option values on the eBay desktop site.

Best practices

Simple

Do use a select list when the list values are simple and short.

A Device type select list with 5 option values: Phone, Tablet, Laptop, Desktop, and TV.

Don’t use a select list if the list values need to use subtext or grouping. Use a Dropdown instead.

A Device select list with 5 option values expanding beyond the right edge of this image.

Filtering

Do use a select list when the list is small and simple.

A Color type select list with 6 option values: Red, Blue, Green, Yellow, Black, and White.

Don’t use a select list for extra large lists that could benefit from filtering. Use a Combobox instead.

An Item type select list with option values expanding beyond the bottom edge of this image.

List size

Do use a select list for lists larger than 3 items.

An Operating system select list with 5 option values: Android, iOS, MacOS, Windows, Linux.

Don’t use a select list for 3 or fewer items. Use a Radio button group instead.

A Preferred contact method select list with 2 option values: Phone, and Email.

Groups

Do use the same selection style within groups. If some selections require the additional functionality of a Dropdown, use a Dropdown for all items in the group.

Two select lists with the same styling sitting side by side.

Don’t mix selection styles in the same group.

Two select lists with different styling sitting side by side.

Usage

Do use select lists within forms.

A Color select list sits in a form layout with 3 other containers and a CTA button.

Don’t use select lists outside of a form as it is a traditionally form-based element.

A select list sits at the bottom of a footer on the eBay website.

Specs

A select list with a container and a borderless select list is shown with specs highlighted. Specs for select list with container: The space between the label and container is 4px, the height of the container is 48px, the padding to the left and right of content inside of the container is 16px, and the padding between the value and the disclosure indicator is 8px. Specs for borderless select list: Padding between the label and value is 16px, and the padding between the value and disclosure indicator is 8px.