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.

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

Considerations

Lightweight

A select list works best with a simple single-select list. If a list requires values with subtext, multi-select, or additional styling flexibility, use a Dropdown instead. If the list contains over 10 values and could benefit from filtering, use a Combobox instead.

Global

The select list inherits functionality and accessibility features from the browser’s native <select> element. The list styling is determined by the browser and operating system.

Form-based

A select list is only used within a form that submits a value and rarely on its own outside of a form. If the list includes actions or navigation, use a Dropdown.

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

The label describes the field’s purpose and expected input value. They are short, usually 4 or fewer words.

A select list with a ‘Date range’ label.

Label position

The label can be positioned above or beside the field.

Two select lists. A select list with a label sitting to the left of the container is below a select list with a label sitting above the container.

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.

Default value

The default value can be an empty value or a value from the list. The choice depends on use case.

By default, select list uses an empty default value. The empty value will fail validation if the field is required, so it’s useful for forcing a selection.

Alternatively, the default value can be set to the first option in the list. This default value is submitted even if a user hasn’t interacted with it. Use a value from the list as a default when it’s likely used by the majority of users.

Two select lists. A select list with an empty value sits to the left of a select list with a ‘Banana’ value.

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

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.