ngb-bootstrapv0.0.1
ngb-bootstrapv0.0.1

Select @ngb-bootstrap/core/select

GitHub

<ngb-select>Component

NgbSelect

Custom select in the Taiga UI style: a field built on Bootstrap 6 .form-control and .combobox-toggle that opens an ngb-listbox in an overlay. It follows the WAI-ARIA select-only combobox pattern. Enter, Space, Arrow Down or Up open the list; arrows, Home, End and typing move through the options; Enter selects; Escape closes the list and keeps focus; Tab selects the highlighted option and moves on. Focus stays on the field, and the highlighted option is announced with aria-activedescendant . It is a form control: ngModel , reactive forms and [(value)] all work. The value is the selected option's value, or an array of values with multiple . Options come from ngb-option and ngb-optgroup children, from the options input, or both. For a plain native picker use <select ngbInput> instead. 

<ngb-select label="Country" placeholder="Choose a country" clearable [(value)]="country">
  <ngb-option value="fr">France</ngb-option>
  <ngb-option value="de">Germany</ngb-option>
</ngb-select>
<ngb-select multiple [options]="users" [optionLabel]="userName" [formControl]="team" />
NameTypeDefault
[(value)]
Current value; two-way bindable with [(value)] .
Tnullnull
[disabled]
Disabled through the disabled input. Forms can also disable the control.
booleanfalse
[invalid]
Forces the invalid state on or off, for errors the form does not know about, such as a server response. By default the control is invalid when its form control is invalid and touched.
booleanundefined
[placeholder]
Text shown while nothing is selected.
string''
[multiple]
Allows several selected options; the value is then an array.
booleanfalse
[display]
How a multiple select shows its selection: chips (default) or count ("3 selected").
NgbSelectDisplay'chips'
[clearable]
Shows a clear button while something is selected.
booleanfalse
[clearLabel]
Accessible name of the clear button. Defaults to the clear string of NGB_I18N .
string—
[size]
sm , md (default) or lg .
NgbSelectSize'md'
[label]
Accessible name of the field and the list.
string—
[labelledBy]
Id of an element that names the field, such as a visible <label> .
string—
[options]
Options as data, in addition to any ngb-option children.
ReadonlyArray<T>[]
[optionValue]
Reads the value of an entry of options . Defaults to the entry itself.
(option: T) => unknown(option) => option
[optionLabel]
Reads the text of an entry of options . Defaults to String(entry) .
(option: T) => string(option) => String(option)
[optionDisabled]
Tells whether an entry of options is disabled.
(option: T) => boolean() => false
[compareWith]
How values are compared, for objects that are equal but not identical. Default Object.is .
(a: unknown, b: unknown) => booleanObject.is
[emptyText]
Text shown when the list has no options. Defaults to the listbox.noResults string.
string—
[placement]
Where the list sits relative to the field. Flips to the other side when it does not fit.
NgbPlacement'bottom-start'
[(open)]
Whether the list is open. Two-way bindable.
booleanfalse
(cleared)
Emits when the user empties the select with the clear button.
void—

<ngb-listbox>Component

NgbListbox

A list of selectable options, following the WAI-ARIA listbox pattern. The options are role="option" rows in Bootstrap 6's .menu surface, so a listbox looks like a dropdown menu, with a check mark on selected options and a highlight on the active one. Unlike a menu, it is for choosing a value, not for running an action. The active option is tracked with aria-activedescendant , so keyboard focus can stay in an input or button that owns the list: pass its key events to onKeydown() . On its own the listbox is focusable and handles the keys itself. Arrow keys, Home and End move (wrapping), typing jumps to the next option that starts with the typed text, Enter or Space selects. Describe the options with ngb-option and ngb-optgroup children, or give plain data with [items] . value is the selected option's value, or an array of them with multiple . 

<ngb-listbox label="Fruit" [(value)]="fruit">
  <ngb-option value="apple">Apple</ngb-option>
  <ngb-option value="pear" disabled>Pear</ngb-option>
</ngb-listbox>
NameTypeDefault
[id]
Id of the list element. An owner's aria-controls points at it.
stringngbId('ngb-listbox')
[label]
Accessible name.
string—
[labelledBy]
Id of an element that names the list.
string—
[items]
Options and groups as data. When empty, the ngb-option and ngb-optgroup children are used.
ReadonlyArray<NgbListboxItem>[]
[(value)]
The selected option's value, or an array of values with multiple . Two-way bindable.
unknownnull
[multiple]
Allows several selected options; value is then an array.
booleanfalse
[compareWith]
How option values are compared. Defaults to Object.is .
(a: unknown, b: unknown) => booleanObject.is
[activation]
Which option is highlighted when the options appear or change.
NgbListboxActivation'selected'
[focusable]
Whether the list takes focus and handles keys itself. Turn it off when an input or button keeps focus and forwards its key events to onKeydown() .
booleantrue
[emptyText]
Text shown when there are no options. Defaults to the listbox.noResults string.
string—
[loading]
Shows "Loading…" instead of the empty text while there are no options.
booleanfalse
(optionSelected)
Emits the value of an option the user picked, also when it was already selected.
unknown—

<ngb-optgroup>Component

NgbOptgroup

Declares a labelled group of ngb-option s. 

<ngb-optgroup label="Fruit">
  <ngb-option value="apple">Apple</ngb-option>
</ngb-optgroup>
NameTypeDefault
[label]required
Heading of the group.
string—
[disabled]
Disables every option of the group.
booleanfalse

<ngb-option>Component

NgbOption

Declares one option of an ngb-listbox or ngb-select . It only describes the option, the list itself draws it, so the label has to be text. Without a label input the element's text is used. 

<ngb-option value="fr">France</ngb-option>
<ngb-option [value]="user" [label]="user.name" disabled />
NameTypeDefault
[value]
The value selected by this option. Any type.
unknown—
[label]
Text of the option. Defaults to the element's text content.
string—
[disabled]
Skipped by arrow keys and ignores clicks.
booleanfalse

NgbSelectDisplayType

How a multiple select shows its selection: a chip per option, or "n selected". 

type NgbSelectDisplay = 'chips' | 'count'

NgbSelectSizeType

type NgbSelectSize = 'sm' | 'md' | 'lg'

isNgbListboxGroupFunction

True for a group, false for a single option. 

isNgbListboxGroup(item: NgbListboxItem): item is NgbListboxGroup

NGB_LISTBOX_ENTRYConstant

InjectionToken<NgbListboxEntry>

NgbListboxActivationType

Which option is highlighted when the options appear or change. 

type NgbListboxActivation = 'selected' | 'first' | 'none'

NgbListboxEntryInterface

Implemented by ngb-option and ngb-optgroup . A listbox or select finds them in its content through this token, which keeps their order, and reads the plain data they stand for.

NameTypeDefault
itemrequired
The option or group the element describes.
() => NgbListboxItem—

NgbListboxGroupInterface

A labelled set of options.

NameTypeDefault
labelrequiredstring—
optionsrequiredReadonlyArray<NgbListboxOption>—
disabled
Disables every option of the group.
boolean—

NgbListboxItemType

What a listbox renders: options and option groups, in order. 

type NgbListboxItem = NgbListboxOption | NgbListboxGroup

NgbListboxOptionInterface

An option of a listbox: what it stands for and how it reads.

NameTypeDefault
valuerequired
What the listbox selects when the option is chosen.
unknown—
labelrequired
Text shown in the list, matched by typeahead, and shown in a select's field.
string—
disabled
Skipped by arrow keys and ignores clicks.
boolean—
© 2026 The ngb-bootstrap authors · Apache-2.0