Material Design select

Our Material Select is a beautiful alternative for standard select.

MDB provides you a variety of options and variations.

Basic example Premium component

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

Data structure:

export class AppComponent {

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

Color variations Premium component

<div class="row">
    <div class="col-md-4 m-b-3">
        <label>Blue label</label>
        <ng-select [options]="colorSelect" placeholder="Choose your option" class="colorful-select dropdown-primary"></ng-select>
    </div>
</div>
            

Data structure:

export class AppComponent {            

    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 Premium component

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

Data structure:

export class AppComponent {            

    optionsSelect: Array<any>;

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

} 
          

Options groups Premium component

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

Data structure:

export class AppComponent {

    groupOptionsSelect: Array<any>;  

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

}
          

Select with icons Premium component

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

Data structure:

export class AppComponent {

    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 Premium component

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

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

Data structure:

export class AppComponent {

    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: '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>