Sign in


Sign up


Angular Bootstrap select

Material Design version

Our Material Select is a beautiful alternative for standard select.

MDB provides you a variety of options and variations.


Basic example MDB Pro component


<div class="row">
    <div class="col-md-6">
        <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
        <label>Example label</label>
    </div>
</div>
        

Data structure:


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'basic-material-select-example',
  templateUrl: 'basic-material-select.html',

})

export class BasicMaterialSelectComponent implements OnInit {

    optionsSelect: Array<any>;         
    
    ngOnInit() { 
        this.optionsSelect = [
            { value: '1', label: 'Option 1' },
            { value: '2', label: 'Option 2' },
            { value: '3', label: 'Option 3' },
        ];
    } 
}
        

Color variations MDB Pro component


<div class="row">
    <div class="col-md-6">
        <mdb-select [options]="colorSelect" placeholder="Choose your option" class="colorful-select dropdown-primary"></mdb-select>
        <label>Blue select</label>
    </div>
</div>
        

Data structure:


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'color-material-select-example',
  templateUrl: 'color-material-select.html',

})

export class ColorMaterialSelectComponent implements OnInit {

    colorSelect: Array<any>;

    ngOnInit() { 
        this.colorSelect = [
            { value: '1', label: 'Option 1' },
            { value: '2', label: 'Option 2' },
            { value: '3', label: 'Option 3' },
            { value: '4', label: 'Option 4' },
            { value: '5', label: 'Option 5' },
        ];
    } 

} 
        

In order to change a select color use one of the following classes:

1. .dropdown-primary

2. .dropdown-danger

3. .dropdown-default

4. .dropdown-secondary

5. .dropdown-success

6. .dropdown-info

7. .dropdown-warning

8. .dropdown-ins

9. .dropdown-dark


Multiple select MDB Pro component


<div class="row">
    <div class="col-md-6">
        <mdb-select [options]="optionsSelect" [multiple]="true" placeholder="Choose your option"></mdb-select>
        <label>Example label</label>
    </div>
</div>
        

Data structure:


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'multiple-material-select-example',
  templateUrl: 'multiple-material-select.html',

})

export class MultipleMaterialSelectComponent implements OnInit {

    optionsSelect: Array<any>;

    ngOnInit() { 
        this.optionsSelect = [
            { value: '1', label: 'Option 1' },
            { value: '2', label: 'Option 2' },
            { value: '3', label: 'Option 3' },
        ];
    } 

} 
        

Options groups MDB Pro component


<div class="row">
    <div class="col-md-6">
        <mdb-select [options]="groupOptionsSelect" placeholder="Choose your option"></mdb-select>
        <label>Example label</label>
    </div>
</div>
        

Data structure:


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'options-material-select-example',
  templateUrl: 'options-material-select.html',

})

export class OptionsMaterialSelectComponent implements OnInit {

    groupOptionsSelect: Array<any>;  

    ngOnInit() { 
        this.groupOptionsSelect = [
            { value: '', label: 'team 1', group: true },
            { value: '1', label: 'Option 1' },
            { value: '2', label: 'Option 2' },
            { value: '', label: 'team 2', group: true },
            { value: '3', label: 'Option 3' },
            { value: '4', label: 'Option 4' },
        ];
    } 

}
        

Select with icons MDB Pro component


<div class="row">
    <div class="col-md-6">
        <mdb-select [options]="iconsSelect" placeholder="Choose your option"></mdb-select>
        <label>Example label</label>
    </div>
</div>
        

Data structure:


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'icons-material-select-example',
  templateUrl: 'icons-material-select.html',

})

export class IconsMaterialSelectComponent implements OnInit {

    iconsSelect: Array<any>;

    ngOnInit() { 
        this.iconsSelect = [
            { value: '1', label: 'Option 1', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg' },
            { value: '2', label: 'Option 2', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg' },
            { value: '3', label: 'Option 3', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg' },
        ];
    } 
}   
        

Disabled select MDB Pro component

You can make your select unselectable, by adding [disabled]="disabled" to mdb-select.



<div class="row">
    <div class="col-md-6">
        <mdb-select [options]="optionsSelect" [disabled]="disabled" placeholder="Choose your option"></mdb-select>
        <label>Example label</label>
    </div>
    <div class="col-md-6">
        <mdb-select [options]="disOptionsSelect" placeholder="Choose your option"></mdb-select>
        <label>Example label</label>
    </div>
</div>
        

Data structure:


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'disabled-material-select-example',
  templateUrl: 'disabled-material-select.html',

})

export class DisabledMaterialSelectComponent implements OnInit {

    optionsSelect: Array<any>;
    disabled: boolean = true;
    disOptionsSelect: Array<any>; 

    ngOnInit() {

        this.optionsSelect = [
            { value: '1', label: 'Option 1' } ,
            { value: '2', label: 'Option 2' } ,
            { value: '3', label: 'Option 3' } ,
        ];
        this.disOptionsSelect = [
            { value: '1', label: 'Disabled option 1', disabled: true },
            { value: '2', label: 'Option 2' } ,
            { value: '3', label: 'Option 3' } ,
        ];

    }      
        
}           
        

Default select

Just add a .browser-default class to the select tag.



<label>Default Select</label>
<select class="browser-default">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>