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
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Forms
Demo
Configure: select the dropdowns below to display the variety of options that a select input supports.
Code
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:
Do
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.
Don't
Do not use place a label inside a select element.