Multiselect

Angular Bootstrap Multiselect - free examples, templates & tutorial

Responsive Angular Multiselect built with Bootstrap 5. Examples of multiselect dropdown with checkbox, listbox, search, buttons, groups, icons, validation, disabled

Unlike a standard Select, multiselect allows the user to select multiple options at once.

Note: To learn more about Select component and see all available options, methods, events and advanced usage - read Select Docs & API section

Basic example

Add multiple attribute to the select element to activate multiple mode.

Note: This component requires MDBootstrap Pro package.

Edit in sandbox 
        
            
          <mdb-form-control>
            <mdb-select [multiple]="true">
              <mdb-select-all-option>Select all</mdb-select-all-option>
              <mdb-option *ngFor="let option of options" [value]="option.value">{{
                option.label
              }}</mdb-option>
            </mdb-select>
            <label mdbLabel class="form-label">Example label</label>
          </mdb-form-control>
          
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss']
          })
          export class AppComponent {
            title = 'mdb-angular-ui-kit-free';
            
            options = [
              { value: '1', label: 'One' },
              { value: '2', label: 'Two' },
              { value: '3', label: 'Three' },
              { value: '4', label: 'Four' },
              { value: '5', label: 'Five' },
              { value: '6', label: 'Six' },
              { value: '7', label: 'Seven' },
              { value: '8', label: 'Eight' },
            ];
          }

Multiselect with icons

Add icon data attribute to the specific options to display the option icon.

Edit in sandbox 
        
            
          <mdb-form-control>
            <mdb-select [multiple]="true">
              <mdb-select-all-option>Select all</mdb-select-all-option>
              <mdb-option *ngFor="let option of options" [value]="option.value">{{
                option.label
              }}
              <span class="option-icon-container">
                <img class="option-icon rounded-circle" [src]="option.icon" />
              </span>
              </mdb-option>
            </mdb-select>
            <label mdbLabel class="form-label">Example label</label>
          </mdb-form-control>
          
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss']
          })
          export class AppComponent {
            title = 'mdb-angular-ui-kit-free';
            
            options = [
                { value: '1', label: 'One', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg' },
                { value: '2', label: 'Two', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg' },
                { value: '3', label: 'Three', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg' },
                { value: '4', label: 'Four', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg' },
                { value: '5', label: 'Five', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg' },
                { value: '6', label: 'Six', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg' },
                { value: '7', label: 'Seven', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-7.jpg' },
                { value: '8', label: 'Eight', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg' },
            ];
          }

Validation

Set validation option to true to enable component validation. The validFeedback and invalidFeedback options allow to modify the validation messages.

Edit in sandbox 
        
            
          <form [formGroup]="validationForm" (ngSubmit)="onSubmit()">
            <div class="mb-3 pb-1">
              <mdb-form-control>
                <mdb-select
                  mdbValidate
                  [multiple]="true"
                  [required]="true"
                  formControlName="select"
                >
                  <mdb-select-all-option>Select all</mdb-select-all-option>
                  <mdb-option *ngFor="let option of options" [value]="option.value">{{
                    option.label
                  }}</mdb-option>
                </mdb-select>
                <label mdbLabel class="form-label">Example label</label>
                <mdb-error *ngIf="select?.invalid && (select?.dirty || select?.touched)"
                  >Input invalid</mdb-error
                >
                <mdb-success *ngIf="select?.valid && (select?.dirty || select?.touched)"
                  >Input valid</mdb-success
                >
              </mdb-form-control>
              <button type="submit" class="btn btn-primary mt-4">Submit</button>
            </div>
          </form>
          
        
    
        
            
          import { Component } from '@angular/core';
          import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
          
          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss']
          })
          export class AppComponent {
            title = 'mdb-angular-ui-kit-free';
            
            options = [
              { value: '1', label: 'One' },
              { value: '2', label: 'Two' },
              { value: '3', label: 'Three' },
              { value: '4', label: 'Four' },
              { value: '5', label: 'Five' },
              { value: '6', label: 'Six' },
              { value: '7', label: 'Seven' },
              { value: '8', label: 'Eight' },
            ];
          
            constructor() {
              this.validationForm = new FormGroup({
                select: new FormControl(null, { validators: Validators.required, updateOn: 'submit' })
              });
            }
          
            get select(): AbstractControl {
              return this.validationForm.get('select')!;
            }
          
            onSubmit(): void {
              this.validationForm.markAllAsTouched();
            }
          }