Material theme

ng-select ships with a bundled Material Design theme stylesheet (@ng-select/ng-select/themes/material.theme.css) that styles the select to match Angular Material form fields.

Material appearances (default / outline / fill)

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgOptionComponent, NgSelectComponent } from '@ng-select/ng-select';

@Component({
    selector: 'ng-material-appearances-example',
    templateUrl: './material-appearances-example.component.html',
    styleUrls: ['./material-appearances-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [FormsModule, NgSelectComponent, NgOptionComponent],
})
export class MaterialAppearancesExampleComponent {
    cities = [
        { id: 1, name: 'New York' },
        { id: 2, name: 'London' },
        { id: 3, name: 'Paris' },
        { id: 4, name: 'Tokyo' },
        { id: 5, name: 'New Delhi' },
    ];

    selectedDefault = this.cities[0];
    selectedOutline = this.cities[0];
    selectedFill = this.cities[0];
    selectedOutlineEmpty: { id: number; name: string } | null = null;
}

<p>
    Compare Material theme appearances. Switch the demo theme to <strong>Material</strong> in the header to see underline, outline, and fill styles. Focus a
    searchable control and type to check that the search input stays vertically aligned with the selected value.
</p>

<div class="form-row">
    <div class="form-group col-md-4">
        <label for="material-default">Default (underline)</label>
        <ng-select id="material-default" [items]="cities" bindLabel="name" placeholder="Select city" [(ngModel)]="selectedDefault"> </ng-select>
    </div>
    <div class="form-group col-md-4">
        <label for="material-outline">Outline</label>
        <ng-select id="material-outline" appearance="outline" [items]="cities" bindLabel="name" placeholder="Select city" [(ngModel)]="selectedOutline">
        </ng-select>
    </div>
    <div class="form-group col-md-4">
        <label for="material-fill">Fill</label>
        <ng-select id="material-fill" appearance="fill" [items]="cities" bindLabel="name" placeholder="Select city" [(ngModel)]="selectedFill"> </ng-select>
    </div>
</div>

<div class="form-row">
    <div class="form-group col-md-4">
        <label for="material-outline-empty">Outline (empty / floating label)</label>
        <ng-select
            id="material-outline-empty"
            appearance="outline"
            [items]="cities"
            bindLabel="name"
            placeholder="Select city"
            [(ngModel)]="selectedOutlineEmpty">
        </ng-select>
    </div>
    <div class="form-group col-md-4">
        <label for="material-outline-options">Outline with ng-option</label>
        <ng-select id="material-outline-options" appearance="outline" placeholder="foo">
            <ng-option>AAA</ng-option>
            <ng-option>BBB</ng-option>
            <ng-option>CCC</ng-option>
        </ng-select>
    </div>
</div>

@use 'sass:meta';

:host ::ng-deep {
    @include meta.load-css('../../../../ng-select/themes/material.theme');
}

Material outline and fill states

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgSelectComponent } from '@ng-select/ng-select';

@Component({
    selector: 'ng-material-states-example',
    templateUrl: './material-states-example.component.html',
    styleUrls: ['./material-states-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [FormsModule, NgSelectComponent],
})
export class MaterialStatesExampleComponent {
    cities = [
        { id: 1, name: 'New York' },
        { id: 2, name: 'London' },
        { id: 3, name: 'Paris' },
        { id: 4, name: 'Tokyo' },
        { id: 5, name: 'New Delhi' },
    ];

    selectedOutline = this.cities[1];
    selectedFill = this.cities[1];
    selectedOutlineDisabled = this.cities[0];
    selectedFillDisabled = this.cities[0];
}

<p>Disabled and clearable states for outline and fill appearances (Material theme).</p>

<div class="form-row">
    <div class="form-group col-md-6">
        <label for="material-outline-clearable">Outline clearable</label>
        <ng-select
            id="material-outline-clearable"
            appearance="outline"
            [items]="cities"
            bindLabel="name"
            [clearable]="true"
            placeholder="Select city"
            [(ngModel)]="selectedOutline">
        </ng-select>
    </div>
    <div class="form-group col-md-6">
        <label for="material-fill-clearable">Fill clearable</label>
        <ng-select
            id="material-fill-clearable"
            appearance="fill"
            [items]="cities"
            bindLabel="name"
            [clearable]="true"
            placeholder="Select city"
            [(ngModel)]="selectedFill">
        </ng-select>
    </div>
</div>

<div class="form-row">
    <div class="form-group col-md-6">
        <label for="material-outline-disabled">Outline disabled</label>
        <ng-select
            id="material-outline-disabled"
            appearance="outline"
            [items]="cities"
            bindLabel="name"
            [disabled]="true"
            placeholder="Select city"
            [(ngModel)]="selectedOutlineDisabled">
        </ng-select>
    </div>
    <div class="form-group col-md-6">
        <label for="material-fill-disabled">Fill disabled</label>
        <ng-select
            id="material-fill-disabled"
            appearance="fill"
            [items]="cities"
            bindLabel="name"
            [disabled]="true"
            placeholder="Select city"
            [(ngModel)]="selectedFillDisabled">
        </ng-select>
    </div>
</div>

@use 'sass:meta';

:host ::ng-deep {
    @include meta.load-css('../../../../ng-select/themes/material.theme');
}

Material multiselect appearances

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgSelectComponent } from '@ng-select/ng-select';

@Component({
    selector: 'ng-material-multiselect-example',
    templateUrl: './material-multiselect-example.component.html',
    styleUrls: ['./material-multiselect-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [FormsModule, NgSelectComponent],
})
export class MaterialMultiselectExampleComponent {
    cities = [
        { id: 1, name: 'New York' },
        { id: 2, name: 'London' },
        { id: 3, name: 'Paris' },
        { id: 4, name: 'Tokyo' },
        { id: 5, name: 'New Delhi' },
    ];

    selectedOutline = [this.cities[0], this.cities[1]];
    selectedFill = [this.cities[0]];
}

<p>Multiple selection with Material outline and fill appearances.</p>

<div class="form-row">
    <div class="form-group col-md-6">
        <label for="material-multi-outline">Outline multiselect</label>
        <ng-select
            id="material-multi-outline"
            appearance="outline"
            [items]="cities"
            bindLabel="name"
            [multiple]="true"
            [closeOnSelect]="false"
            placeholder="Select cities"
            [(ngModel)]="selectedOutline">
        </ng-select>
    </div>
    <div class="form-group col-md-6">
        <label for="material-multi-fill">Fill multiselect</label>
        <ng-select
            id="material-multi-fill"
            appearance="fill"
            [items]="cities"
            bindLabel="name"
            [multiple]="true"
            [closeOnSelect]="false"
            placeholder="Select cities"
            [(ngModel)]="selectedFill">
        </ng-select>
    </div>
</div>

@use 'sass:meta';

:host ::ng-deep {
    @include meta.load-css('../../../../ng-select/themes/material.theme');
}

API

Inputs used by the examples on this page:

Input	Type	Default	Description
appearance	`string`	`underline`	Allows to select dropdown appearance. Set to `outline` or `fill` for Material form-field styles (applies only to Material theme)
bindLabel	`string`	`label`	Object property to use for label. Default `label`
[clearable]	`boolean`	`true`	Allow to clear selected value. Default `true`
[closeOnSelect]	`boolean`	true	Whether to close the menu when a value is selected
[items]	`Array<any>`	`[]`	Items array
[multiple]	`boolean`	`false`	Allows to select multiple items.
placeholder	`string`	`-`	Placeholder text.

See the NgSelectComponent API reference for the complete list of inputs and outputs.