Select @ngb-bootstrap/core/select
A custom select built on Bootstrap 6 .form-control and .combobox-toggle. The field opens an ngb-listbox of ngb-options in an overlay, following the WAI-ARIA select-only combobox pattern. It is a form control, picks one value or many, and takes its options from child elements or from an options array. The listbox is also usable on its own. When the browser's own picker is enough, use a native <select ngbInput>.
Basic
ngb-option. [(value)] reads and sets the selected option's value, and clearable adds a clear button. Selected: none
Multiple
multiple makes the value an array. The selection shows as removable chips, or as "n selected" with display="count". The list stays open while you pick. TypeScript, Rust
Groups and disabled options
ngb-optgroup adds a heading and can disable all its options. Disabled options are skipped by the arrow keys and ignore clicks. Selected: carrot
Reactive forms
formControlName and give options with optionValue, optionLabel and optionDisabled accessors, so the control holds an id rather than the object. The field turns invalid, and the error appears, once the control is invalid and touched. Template-driven forms
ngModel and the required attribute work the same way. Plan: none
Touched: false, valid: false
Native select
<select ngbInput> inside ngb-textfield already gives a Bootstrap-styled native select with a label, hint, groups and disabled options. Reach for it on phones or when you need the platform picker; it is documented with the Text input. City: oslo
Sizes and states
sm, md (default) and lg, plus the disabled and invalid states. Accessibility
The field is a role="combobox" with aria-haspopup="listbox", aria-expanded and, while open, aria-controls and aria-activedescendant. The list is a role="listbox" of role="option" rows with aria-selected (and aria-multiselectable); groups are role="group" named by their heading. Focus never leaves the field: the highlighted option moves through aria-activedescendant. Name the field with label or labelledBy, since a <label for> cannot point at it.
Enter, Space, Arrow Down and Arrow Up open the list on the highlighted (selected) option. Arrow keys, Home and End move, wrapping, and typing a letter jumps to the next option that starts with it. Enter or Space selects, Escape closes and keeps focus on the field, and Tab selects the highlighted option and moves on. In a multiple select Backspace removes the last chip. An invalid and touched control gets aria-invalid="true".