You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: guidelines/components/select/README.md
+50-59Lines changed: 50 additions & 59 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,13 +2,22 @@
2
2
3
3
A select component is a right choice to preventing errors with predefined options, also they reduce the vertical space by showing several options in a reduced space. Selects are used in forms, letting the user select an option instead using an input.
4
4
5
-
## Appearance
5
+
## Usage
6
6
7
-
Select is widely recognizable, despite the options are not shown at the first instance, an icon with a down arrow indicates that clicking in the field the list will be visible. In the input, the placeholder defines the attribute that will get the value.
8
7
9
-
* The options list will be displayed immediately above the placeholder, to get visible all the time which form fill attribute is the user filling.
10
-
* In case that an option is selected when the dropdown turns visible, it should be at the top of the dropdown whenever this would be possible.
11
-
* Multiple option selection will get an appearance with a checkbox that indicates the elements from the list that are selected or not.
8
+
### Single select
9
+
10
+
- A dropdown element should allow the user to select one option from a list.
11
+
- The select component should always display a label, different from any name in the option list.
12
+
- If the options list is extensive, consider letting the user type for suggestions filtering the whole number of options.
13
+
- A default choice can be displayed as the placeholder before user selection. It must be placed as the first item on the options list and appear selected.
14
+
- Use progressive disclosure between linked select components.
15
+
16
+
### Multi-select
17
+
18
+
- If more than one option is applicable, a multi-selection box should be used.
19
+
- If the list of options is short (4 or less) and users can select more than one option, consider using checkboxes instead of a multi-selection list for simplicity and visual clarity.
20
+
- Multi-select fields include checkboxes for every single option in the list, the entire row must be clickable.
12
21
13
22
14
23
## States
@@ -26,29 +35,49 @@ The options have two states: **enabled**, **hover**, **focus** and **selected**:
26
35
27
36
28
37
29
-
30
38
## Multiple selection
31
39
32
40
Allows the user to select more than one option from the list. To indicate which items are selected and which not, the design for multiple selections integrates a checkbox pairing with each option from the dropdown.
@@ -111,61 +140,23 @@ Select input specifications are the same as the [text-input](https://developer.d
111
140
| Focus outline `border-width`| 2px |
112
141
113
142
114
-
115
143
116
144
## Accessibility
117
145
118
146
### WCAG 2.2
119
147
120
-
**Understanding WCAG 2.2** - [SC 3.2.2: On Input](https://www.w3.org/WAI/WCAG22/Understanding/on-input.html)
121
-
122
-
* Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
148
+
* Understanding WCAG 2.2 - [SC 3.2.2: On Input](https://www.w3.org/WAI/WCAG22/Understanding/on-input.html)
* An element that contains or owns all the listbox options has role `listbox`.
129
-
* Each option in the listbox has role `option` and is a DOM descendant of the element with role listbox or is referenced by an `aria-owns` property on the listbox element.
130
-
* If the listbox is not part of another widget, then it has a visible label referenced by `aria-labelledby` on the element with role listbox.
131
-
* In a single-select listbox, the selected option has `aria-selected` set to true.
132
-
* If the listbox supports multiple selection:
133
-
* The element with role `listbox` has `aria-multiselectable` set to true.
134
-
* All selected options have `aria-selected` set to true.
135
-
* All options that are not selected have `aria-selected` set to false.
136
-
* If the complete set of available options is not present in the DOM due to dynamic loading as the user scrolls, their `aria-setsize` and `aria-posinset` attributes are set appropriately.
137
-
* If options are arranged horizontally, the element with role `listbox` has `aria-orientation` set to horizontal. The default value of `aria-orientation` for listbox is vertical.
138
-
139
-
140
-
## User Interface Design Considerations
141
-
142
-
### Single select
143
-
144
-
- A dropdown element should allow the user to select one option from a list.
145
-
- The select component should always display a label, different from any name in the option list.
146
-
- If the options list is extensive, consider letting the user type for suggestions filtering the whole number of options.
147
-
- A default choice can be displayed as the placeholder before user selection. It must be placed as the first item on the options list and appear selected.
148
-
- Use progressive disclosure between linked select components.
149
-
150
-
### Multi-select
151
-
152
-
- If more than one option is applicable, a multi-selection box should be used.
153
-
- If the list of options is short (4 or less) and users can select more than one option, consider using checkboxes instead of a multi-selection list for simplicity and visual clarity.
154
-
- Multi-select fields include checkboxes for every single option in the list, the entire row must be clickable.
155
-
156
-
## Required and error
157
-
158
-
* A required empty select should show an error message when submitted.
159
-
* Helper text can be added to the component, [specs](https://developer.dxc.com/design/components/text-input) are available in the input component.
0 commit comments