Responsive UI - v8.2

Multiselect

Components > Editing Data > Multiselect
Use this component to...
Prompt the user to select multiple items from a list
See this component in action...
Test out this component in a hosted version of the sample app

Overview

Use the multiselect component to prompt the user to select multiple items from a list.

Responsive UI supports 2 modes for multiselect:

  • Multiselect with filtering
  • Multiselect with grouping

Multiselect with filtering

The multiselect with filtering option is good for cases when there are a large number of options in the list. Filtering allows the user to reduce the list to only those options that contain a particular text string.

A multiselect with filtering in its normal, closed state
MultiSelect with filtering example, closed
A multiselect with filtering showing its dropdown with multiple selection options
MultiSelect with filtering example, open

Multiselect with grouping

The multiselect with grouping option is good for cases when you need to group options in the list.

A multiselect with grouping in its normal, closed state
MultiSelect with grouping example, closed
A multiselect with grouping showing its dropdown with grouped selection options
MultiSelect with grouping example, closed

Development

Web component development

Component reference

p-multiSelect
p-multiSelect
Module: MultiSelectModule - Package: primeng
⚠️ This component requires the use of Angular and will not work in non-Angular applications.

Allows multiple selection using a compact user experience that allows the user to filter the list

View the p-multiSelect reference doc

If you're adding PrimeNG to your solution for the first time, reference their setup documentation. It's important to note that the inclusion of the nova-light theme css is not necessary to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.

mat-select
mat-select
Module: MatSelectModule - Package: @angular/material/select
⚠️ This component requires the use of Angular and will not work in non-Angular applications.

Allows multiple selection using a compact user experience that allows grouping of list items

View the mat-select reference doc

If you're adding PrimeNG to your solution for the first time, reference their setup documentation. It's important to note that the inclusion of the nova-light theme css is not necessary to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.

Implementing multiselect with filtering

For multiple selection cases where you want to allow the user to filter the list, use the PrimeNG p-multiselect component.

Begin by importing the MultiSelectModule module into your application.

Import the module 
// import into app.module
import { MultiSelectModule } from 'primeng/multiselect';

@NgModule({
    imports: [
        ...
        MultiSelectModule,
        ...
    ]
})

export class AppModule(){}

Import SelectItem from the PrimeNG API. Set up data for the multiselect in the component or within a service.

Define the list items 
import { SelectItem } from 'primeng/api';

...

const accountTypeList: SelectItem[] =
[
    { label: 'Checking', value: 'Checking' },
    { label: 'Business Checking', value: 'Business Checking' },
    { label: 'Student Checking', value: 'Student Checking' },
    { label: 'Savings', value: 'Savings' },
    { label: 'Money Market', value: 'Money Market' },
    { label: 'CD', value: 'CD' },
    { label: 'IRA', value: 'IRA' }
];

Add a p-multiselect instance to the HTML and bind the data to the options property.

Multiselect with filtering HTML 
<p-multiSelect defaultLabel="Select Account Types" [options]="accountTypeList" formControlName="accountTypes"></p-multiSelect>

Implementing multiselect with grouping

For multiple selection cases where you want to allow the user to group items in the list, use the Material Design mat-select component.

Start by importing the MatSelectModule module from Material Design.

Import the module 
// import into app.module
import { MatSelectModule } from '@angular/material/select';

@NgModule({
    imports: [
        ...
        MatSelectModule,
        ...
    ]
})

export class AppModule(){}

Add a mat-form-field component to the HTML.

  • Nest a mat-label within the mat-form-field to specify the message displayed when no items are selected.
  • Also nest a mat-select within the mat-form-field; include multiple disableRipple disableOptionCentering so the component allows multiple selection and uses the supported appearance. Tie this to a form field with the formControlName property. Two-way bind the value property to the backing string array in your TypeScript that contains the list of selected items.
    • Within the mat-select, nest one mat-optgroup for each group, specifying the group name in the label property.
      • Within each mat-optgroup, nest one mat-option for each option in that group, specifying the option name as the element’s content and the option value with the value property.
Multiselect with grouping HTML 
<mat-form-field>
    <mat-label>Select Notifications</mat-label>
    <mat-select multiple disableRipple disableOptionCentering formControlName="alerts" [(value)]="this.customerInfo.alerts">
        <mat-optgroup *ngFor="let group of alertGroups" [label]="group.name" [disabled]="group.disabled">
            <mat-option *ngFor="let alert of group.alert" [value]="alert.category" [disabled]="alert.disabled">
                {{alert.description}}
            </mat-option>
        </mat-optgroup>
    </mat-select>
</mat-form-field>

Angular component development

Component reference

p-multiSelect
p-multiSelect
Module: MultiSelectModule - Package: primeng

Allows multiple selection using a compact user experience that allows the user to filter the list

View the p-multiSelect reference doc

If you're adding PrimeNG to your solution for the first time, reference their setup documentation. It's important to note that the inclusion of the nova-light theme css is not necessary to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.

mat-select
mat-select
Module: MatSelectModule - Package: @angular/material/select

Allows multiple selection using a compact user experience that allows grouping of list items

View the mat-select reference doc

If you're adding PrimeNG to your solution for the first time, reference their setup documentation. It's important to note that the inclusion of the nova-light theme css is not necessary to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.

Implementing multiselect with filtering

For multiple selection cases where you want to allow the user to filter the list, use the PrimeNG p-multiselect component.

Begin by importing the MultiSelectModule module into your application.

Import the module 
// import into app.module
import { MultiSelectModule } from 'primeng/multiselect';

@NgModule({
    imports: [
        ...
        MultiSelectModule,
        ...
    ]
})

export class AppModule(){}

Import SelectItem from the PrimeNG API. Set up data for the multiselect in the component or within a service.

Define the list items 
import { SelectItem } from 'primeng/api';

...

const accountTypeList: SelectItem[] =
[
    { label: 'Checking', value: 'Checking' },
    { label: 'Business Checking', value: 'Business Checking' },
    { label: 'Student Checking', value: 'Student Checking' },
    { label: 'Savings', value: 'Savings' },
    { label: 'Money Market', value: 'Money Market' },
    { label: 'CD', value: 'CD' },
    { label: 'IRA', value: 'IRA' }
];

Add a p-multiselect instance to the HTML and bind the data to the options property.

Multiselect with filtering HTML 
<p-multiSelect defaultLabel="Select Account Types" [options]="accountTypeList" formControlName="accountTypes"></p-multiSelect>

Implementing multiselect with grouping

For multiple selection cases where you want to allow the user to group items in the list, use the Material Design mat-select component.

Start by importing the MatSelectModule module from Material Design.

Import the module 
// import into app.module
import { MatSelectModule } from '@angular/material/select';

@NgModule({
    imports: [
        ...
        MatSelectModule,
        ...
    ]
})

export class AppModule(){}

Add a mat-form-field component to the HTML.

  • Nest a mat-label within the mat-form-field to specify the message displayed when no items are selected.
  • Also nest a mat-select within the mat-form-field; include multiple disableRipple disableOptionCentering so the component allows multiple selection and uses the supported appearance. Tie this to a form field with the formControlName property. Two-way bind the value property to the backing string array in your TypeScript that contains the list of selected items.
    • Within the mat-select, nest one mat-optgroup for each group, specifying the group name in the label property.
      • Within each mat-optgroup, nest one mat-option for each option in that group, specifying the option name as the element’s content and the option value with the value property.
Multiselect with grouping HTML 
<mat-form-field>
    <mat-label>Select Notifications</mat-label>
    <mat-select multiple disableRipple disableOptionCentering formControlName="alerts" [(value)]="this.customerInfo.alerts">
        <mat-optgroup *ngFor="let group of alertGroups" [label]="group.name" [disabled]="group.disabled">
            <mat-option *ngFor="let alert of group.alert" [value]="alert.category" [disabled]="alert.disabled">
                {{alert.description}}
            </mat-option>
        </mat-optgroup>
    </mat-select>
</mat-form-field>

Design

There are currently no design elements for the multiselect component.

Support options
Have questions on this topic?
Join the Responsive UI team in Microsoft Teams to connect with the community.
See something in this page that needs to change?
Send us feedback on this page.
Last updated Fri Jul 28 2023