Select input

The select input component represents a control that provides a menu of options. It can be enabled to as a single or multiple select control.

Component data

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Forms


Configure: select the dropdowns below to display the variety of options that a select input supports.



Responsive preview

Usage best practices

Consider using select input when:

  • users are expected to select one item from a list of options (single select)
  • users are expected to select multiple options from a list (multiple select)

Related components:


Ensure button labels and descriptions are clear and easy to understand.

Arrange the order of the select list based on the frequency of use or in alphabetical order if no clear difference in the frequency.

Ensure select control (the box) is large enough for mouse clicking and finger pressing.

Ensure options are adequately spaced for touch screens.


Do not use place a label inside a select element.