Multiselect

Overview

A pattern that combines readonly combobox with multi-enabled listbox to create multiple-selection dropdowns with keyboard navigation and screen reader support.

Usage

The multiselect pattern works best when users need to choose multiple related items from a familiar set of options.

Consider using this pattern when:

• Users need multiple selections - Tags, categories, filters, or labels where multiple choices apply
• The option list is fixed (fewer than 20 items) - Users can scan options without search
• Filtering content - Multiple criteria can be active simultaneously
• Assigning attributes - Labels, permissions, or features where multiple values make sense
• Related choices - Options that logically work together (such as selecting multiple team members)

Avoid this pattern when:

• Only single selection is needed - Use the Select pattern for simpler single-choice dropdowns
• The list has more than 20 items with search needed - Use the Autocomplete pattern with multiselect capability
• Most or all options will be selected - A checklist pattern provides better visibility
• Choices are independent binary options - Individual checkboxes communicate the choices more clearly

Features

The multiselect pattern combines Combobox and Listbox directives to provide a fully accessible dropdown with:

• Keyboard Navigation - Navigate options with arrow keys, toggle with Space, close with Escape
• Screen Reader Support - Built-in ARIA attributes including aria-multiselectable
• Selection Count Display - Shows compact "Item + 2 more" pattern for multiple selections
• Signal-Based Reactivity - Reactive state management using Angular signals
• Smart Positioning - CDK Overlay handles viewport edges and scrolling
• Persistent Selection - Selected options remain visible with checkmarks after selection

Examples

Basic multiselect

Users need to select multiple items from a list of options. A readonly combobox paired with a multi-enabled listbox provides familiar multiselect functionality with full accessibility support.

The multi attribute on ngListbox enables multiple selection. Press Space to toggle options, and the popup remains open for additional selections. The display shows the first selected item plus a count of remaining selections.

Multiselect with custom display

Options often need visual indicators like icons or colors to help users identify choices. Custom templates within options allow rich formatting while the display value shows a compact summary.

Each option displays an icon alongside its label. The display value updates to show the first selection's icon and text, followed by a count of additional selections. Selected options show a checkmark for clear visual feedback.

Controlled selection

Forms sometimes need to limit the number of selections or validate user choices. Programmatic control over selection enables these constraints while maintaining accessibility.

This example limits selections to three items. When the limit is reached, unselected options become disabled, preventing additional selections. A message informs users about the constraint.

APIs

The multiselect pattern uses the following directives from Angular's Aria library. See the full API documentation in the linked guides.

Combobox Directives

The multiselect pattern uses ngCombobox with the readonly attribute to prevent text input while preserving keyboard navigation.

Inputs

See the Combobox API documentation for complete details on all available inputs and signals.

Listbox Directives

The multiselect pattern uses ngListbox with the multi attribute for multiple selection and ngOption for each selectable item.

Inputs

Model

When multi is true, users can select multiple options using Space to toggle selection. The popup remains open after selection, allowing additional choices.

See the Listbox API documentation for complete details on listbox configuration, selection modes, and option properties.

Positioning

The multiselect pattern integrates with CDK Overlay for smart positioning. Use cdkConnectedOverlay to handle viewport edges and scrolling automatically.