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

Development

Web component development

Component reference

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.

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>

Angular component development

Component reference

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

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>

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.

Did this page help you?

Last updated Tue Feb 27 2024