Pick List

A dual-listbox for moving items between available and selected panes. Click to highlight (⌘/Ctrl-click for multi), use the transfer buttons, or double-click an item to move it. Integrates with Angular Forms via [(ngModel)] / formControlName.

Pronew

Basic usage

Bind [options] to the full catalog and [(ngModel)] to the selected values array.

Filter

Add the filter attribute to show search boxes above each list.

Installation

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

npx base-ui-cli add pick-list

npx -y base-ui-mcp

// Install: npx base-ui-cli add pick-list
// Paths are relative to aliases.components (default: src/app/components)
import { PickListComponent, PickListItem } from './pick-list/pick-list.component';

@Component({
  selector: 'app-your-component',
  imports: [
    PickListComponent
  ],
  template: `...`
})
export class YourComponent {}