A searchable dropdown that represents selected values as removable chips. Integrates with Angular Forms via [(ngModel)] or formControlName. Supports disabled options and a maximum selection limit.
Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.
Bind an array of MultiSelectOption to options. Use [(ngModel)] to read or set the selected values array.
Selected values: [
"angular",
"ts"
]
<ply-multi-select [options]="skills" [(ngModel)]="selected"></ply-multi-select>
skills: MultiSelectOption[] = [
{ label: 'Angular', value: 'angular' },
{ label: 'TypeScript', value: 'ts' },
{ label: 'Docker', value: 'docker', disabled: true },
];
selected: unknown[] = [];
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add multi-select
// Paths are relative to aliases.components (default: src/app/components)
import { MultiSelectComponent } from './multi-select/multi-select.component';
@Component({
selector: 'app-multi-select-example',
imports: [
MultiSelectComponent
],
template: `...`
})
export class MultiSelectExampleComponent {}Install
npx ply-ui-cli add multi-select
Use [max]="3" to limit how many items can be selected. The dropdown disables new selections once the limit is reached.
<ply-multi-select [options]="skills" [max]="3"></ply-multi-select>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add multi-select
// Paths are relative to aliases.components (default: src/app/components)
import { MultiSelectComponent } from './multi-select/multi-select.component';
@Component({
selector: 'app-multi-select-example',
imports: [
MultiSelectComponent
],
template: `...`
})
export class MultiSelectExampleComponent {}Install
npx ply-ui-cli add multi-select
Add disabled: true to any MultiSelectOption to make it unselectable.
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add multi-select
// Paths are relative to aliases.components (default: src/app/components)
import { MultiSelectComponent } from './multi-select/multi-select.component';
@Component({
selector: 'app-multi-select-example',
imports: [
MultiSelectComponent
],
template: `...`
})
export class MultiSelectExampleComponent {}Install
npx ply-ui-cli add multi-select
Run the following command to add this component to your project:
npx ply-ui-cli add multi-select
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add multi-select
// Paths are relative to aliases.components (default: src/app/components)
import { MultiSelectComponent } from './multi-select/multi-select.component';
@Component({
selector: 'app-your-component',
imports: [
MultiSelectComponent
],
template: `...`
})
export class YourComponent {} API for multi-select — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-multi-select | class | string | '' | Additional host CSS classes (merged via cn()). |
ply-multi-select | options | MultiSelectOption[] | [] | — |
ply-multi-select | placeholder | unknown | 'Select options…' | — |
ply-multi-select | max | number | 0 | — |
ply-multi-select | (selectionChange) | unknown[] | — | Emits when selectionChange occurs. |
ply-multi-select | disabled | boolean | false | — |
Content