Group Select

Group select allows users to select multiple options from a single item in a menu. Other select components are multi select, and select, tiered select.
Demo and Developer GuidelinesFigma Component

Anatomy

Multi Select

Grouped Menu

Items within a menu can be categorized into different groups with labels. Subgroups are also possible.

Types

Standard Item

Within the context of group select, a single standard item can include multiple items. Single items can also represent one item when needed.
Example: The single standard item of Group #1 is selected, which includes Option1 and Option2.

Contact Item

A single contact item can include multiple contacts. If an image is not used for the avatar, a People icon will be used as default for groups. See contact item for more information.
Example: The single contact item of Group #1 is selected, which includes Option1 and Option2.

Grouped Menu

Items within a menu can be grouped into different sections. The header indicates the group title. See the menu component for more information.
Example: Group select using headers for the list of groups and and grouped menu items.

States

To see an example of the  states see the multi select component.

Variations

Contact Items and Avatars

Contact items can have an avatar depending on the use case. See contact item and avatar for more information.

Behavior

When a user selects a grouped item, all the individual items in that group get selected and are displayed as tokens. The grouped item will then be in the disabled state. The grouped item will be selectable again if one or more of the tokens from that group is removed from the field.

If a grouped item is selected, the individual items within the group will appear selected in the menu. When a token is removed the item will be deselected.
Single standard items example.
Grouped menu items example.

Specifications

See the following components for styling information: multi select, menu, contact item.

Group select has a minimum of 248px and can also accept block and grow to the width of its parent.