Select from list

In the Admin, user will often times need to select item(s) from a list of items. This pattern address the variations of list pattern.

When to Use

When user need to select item(s) from a list of items, and each item can be identified simply by one label

Variations

Multi-select Dropdown (aka ultra-selector)

This variation is good for Multi Selection with many options (10+), when the option does not need to be shown immediately or when space needs to be preserved.

Multi-select dropdown form element

Single Select Dropdown

This variation is good for Single Selection with many options (10+), when the option does not need to be shown immediately or when space needs to be preserved.mmediately or when space needs to be preserved.

Single-select dropdown form element

Multi-Select List Box

The advantage of a list box is that it exposes more options to the user. The list can be made scroll-able when space is a consideration and/or the list is long. A list box is mandatory when the list of options exceeds 6 items.

Multi-select list box

Single Select List Box

The advantage of a list box is that it exposes more options to the user. The list can be made scroll-able when space is a consideration and/or the list is long. A list box is mandatory when the list of options exceeds 6 items.

Single-select list box

Accessibility

The form drop down, scroll area, and selections should be accessible via keyboard.

Follow this form control accessibility guideline: https://www.w3.org/TR/WCAG10-HTML-TECHS/