Lead: Shani Laendler (Unlicensed)
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
reference: https://demos.telerik.com/kendo-ui/multiselect/index
...
All selected items are presented in a “selected” area, placed at the upper area of the options list.
All other items are listed in the area below (do not include selected items)
Selected items:
The list is sorted according to the internal option list sort (if the list is divided to categories - the list will be sorted by the inner sort of the categories).
The number of selected item is presented in parenthesis.
Each new item that will be checked or unchecked will move to the relevant area only in the re-opening of the dropdown
The user may uncheck some items or “clear all”:
The selected items are unchecked. In the next re-opening of the option list, the list will go back to its original structure.
...
The chiclets area will expand vertically to show all selected items:
When space is a constraint or the user is expected to select many items, the chiclets mechanism should be switched into a cumulative mechanism:
A single chiclet will be presented in the search trigger area.
The chiclet will present the amount of selected items, e.g. “3 selected”.
With each new selection the number in the chiclet will increase by 1.
Click “x” will clear ALL selections.
A search can be perform in the area as explained in this page.
If the label is not indicative enough, the selected item type should be indicated within the chiclet:
States
States are similar to Searchable Dropdown Menu, except the deferences below:
...
Use when:
The list has 10-50 (TBD) items. If the list has more than 50 (TBD) items, use Dual List Selector instead.
Users know what they are looking for (e.g. when supervisors are looking for their agents in a list). Otherwise a simple scroll through the list will be sufficient.
Don’t use when:
The user doesn’t know what he’s looking for. In this case use regular Drop Down Menu.
Design
...
Future Version (TBD)
Dropdown with a tree view multi-select list
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in Keyboard & Focus Management Guidelines >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>
Contrast & size compliance
<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>
Design
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
<<a box containing the code - discuss with Femi>>