Select
Select is a compound consisting of a select field and Listbox. It allows users to select one or more options.
Select Field
The below documentation is about the select field. Select field is the trigger of the Listbox. SeeListboxdesign for details.
1. Anatomy
Value | Purpose |
superclass role | Indicates the composite or group |
subclass role | Indicates if the component is combobox, listbox, or menu. |
aria-activedescendant | State of the subclass. |
aria-describedby | Select's description. |
2. Configurations
2.1 Size
There are three sizes: small, medium, large. Use medium as default.
2.2 Selection type
There are two selection types: single-select and multi-select.
2.3 Search type
There are two search types: remote search and option search.
Remote search fetches data from the server; Option search filters the options within the Listbox.
Please see3.3 Searching for optionsfor details on behaviors.
2.4 Clearable
clearable is a boolean value that allows users to clear selected value in one click.
2.5 Helper text
Use the helper-text to display a message.
2.6 Error message
Use the error-message to display an action to fix the error. Optionally, you can keep the helper text below as well.
2.7 Required
required is a boolean value. A required field can not procees without a valid user input.
2.8 Select field width
The input expand to fill the entire width of the parent’s container. In order to set the width of the input, you can wrap it inside a parent container and set the width of the parent container.See responsiveness for details.
2.9 Label alignment
The text input field supports vertical and horizontal alignment. We use vertical as default.
2.10 Label-box width (horizontal alignment only)
The horizontally-aligned input field sits in a 12-columns grid system. The parent container is divided into 12 columns with a gap of 4px.
Customize the input field label’s width by setting the number of columns of the label-box.
There is a minimum width of 112px set on the input fields (excludind the lables) and if the parent’s container is not sufficient, the content will overflow.
4. States
Input fields have 8 states: empty, filled, selected, hover, active/focus, read only, disabled and error. Please read the difference betweendisabled and read-only.
5. Keyboard experience
The keyboard experience for a single line input is different from multiline input.
5.1 Single-select
5.2 multi-select (option search)
7. Resilience & responsiveness
7.1 Size
Select field is a content-fit component unless the designer specify the width of the field. It overflows if bigger than the parent container.
7.2 Label wrapping
Label expand as much as it can within the confines of the parent container and then starts wrapping the text to the next line.
7.3 Option wrapping
For single-select, the option will hide once it’s longer than the container. For multi-select, the container will grow as the option grows.
7.4 layout-fit (default)
The width of the Select field grows or shrinks with the container’s width. See2.8 Select field widthabove.
8. Visual Specs
8.1 Margin
Regardless of select’s size.
- The margin between select field and labels is always coherent.
- The margin between cross button, seperator and down-chevron is always coherent.
- The margin between icon and microcopy in error state is always coherent.
8.2 Padding
8.3 Font size
8.4 Icon size
8.5 Outline width
- 1px border is used by default. It applies to empty and filled.
- 2px is used in error and focus state.
