Multi-Select

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.

Pro

Multi Select — part of Base UI Pro

Unlock it plus 89 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Basic Multi-Select

Bind an array of MultiSelectOption to options. Use [(ngModel)] to read or set the selected values array.

Angular TypeScript

Selected values: [ "angular", "ts" ]

HTML

TypeScript

Maximum Selection Limit

Use [max]="3" to limit how many items can be selected. The dropdown disables new selections once the limit is reached.

Pick up to 3 skills…

HTML

Disabled Options

Add disabled: true to any MultiSelectOption to make it unselectable.

Docker is disabled…

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add multi-select

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-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 reference for multi-select
API	Member	Type	Default	Description
`base-multi-select`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`base-multi-select`	`options`	`MultiSelectOption[]`	`[]`	—
`base-multi-select`	`placeholder`	`unknown`	`'Select options…'`	—
`base-multi-select`	`max`	`number`	`0`	—
`base-multi-select`	`(selectionChange)`	`unknown[]`	—	Emits when selectionChange occurs.
`base-multi-select`	`disabled`	`boolean`	`false`	—