Select overview

NbSelectComponent

The NbSelectComponent provides a capability to select one of the passed items.

Installation

Import NbSelectModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbSelectModule,
  ],
})
export class PageModule { }

Usage

If you want to use it as the multi-select control you have to mark it as multiple. In this case, nb-select will work only with arrays - accept arrays and propagate arrays.

Items without values will clean the selection. Both null and undefined values will also clean the selection.

Select may be bounded using selected input:

<nb-select [(selected)]="selected"></nb-selected>

Or you can bind control with form controls or ngModel:

Options in the select may be grouped using nb-option-group component.

Select may have a placeholder that will be shown when nothing selected:

You can disable select, options and whole groups.

Also, the custom label may be provided in select. This custom label will be used for instead placeholder when something selected.

Default nb-select size is medium and status is basic. Select is available in multiple colors using status property:

There are five select sizes:

And two additional style types - filled:

and hero:

Select is available in different shapes, that could be combined with the other properties:

By default, the component selects options whose values are strictly equal (===) with the select value. To change such behavior, pass a custom comparator function to the compareWith attribute.

You can add an additional icon to the select via the nb-form-field component:

NbOptionListComponent

The NbOptionListComponent is container component for NbOptionGroupComponent andNbOptionComponent list.

NbOptionGroupComponent

NbOptionGroupComponent