Lead: @Shani Laendler (Unlicensed)

ONGOING

reference: https://demos.telerik.com/kendo-ui/multiselect/index

Description

A multi select searchable dropdown allows the user to easily search and select multiple values from a menu list.

Example:

Open

Usage & Behaviour

This component is similar to Searchable Dropdown Menu, with the below exceptions.

General guidelines

Structure

Open

• Select trigger area: includes a search area and chiclets for the selected items

• Options list: includes checkboxes to indicate the multiple selection option

Internal Logic

Chiclet Behaviour

• Selected items will be presented using a chiclet

• An item can be removed by either deleting the chiclet or by unchecking the checkbox

Opening the option list after a selection was made

• 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.

Multiple chiclets

• 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:

Interaction

Best practices

• 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 Multi Select Dropdown Menu.

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

Code

<<a box containing the code - discuss with Femi>>