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 GuidelinesAnatomy
Multi Select
See multi select.
Grouped Menu
Items within a menu can be categorized into different groups with labels. Subgroups are also possible.
Error
Please see In-Line Error Validation on Submit.
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.
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.
Group select has a minimum of 248px and can also accept block and grow to the width of its parent.
