Represents a container used to display a list of items for a user to select from.
API
class Listbox<V> { readonly id: InputSignal<any>; readonly element: HTMLElement; protected textDirection: Signal<Direction>; protected items: Signal<any[]>; orientation: InputSignal<"vertical" | "horizontal">; multi: InputSignalWithTransform<boolean, unknown>; wrap: InputSignalWithTransform<boolean, unknown>; softDisabled: InputSignalWithTransform<boolean, unknown>; focusMode: InputSignal<"roving" | "activedescendant">; selectionMode: InputSignal<"follow" | "explicit">; typeaheadDelay: InputSignal<number>; disabled: InputSignalWithTransform<boolean, unknown>; readonly: InputSignalWithTransform<boolean, unknown>; values: ModelSignal<V[]>; scrollActiveItemIntoView(options?: ScrollIntoViewOptions): void; gotoFirst(): void;}
id
InputSignal<any>A unique identifier for the listbox.
element
HTMLElementA reference to the host element.
textDirection
Signal<Direction>A signal wrapper for directionality.
items
Signal<any[]>The Option UIPatterns of the child Options.
orientation
InputSignal<"vertical" | "horizontal">Whether the list is vertically or horizontally oriented.
multi
InputSignalWithTransform<boolean, unknown>Whether multiple items in the list can be selected at once.
wrap
InputSignalWithTransform<boolean, unknown>Whether focus should wrap when navigating.
softDisabled
InputSignalWithTransform<boolean, unknown>Whether to allow disabled items to receive focus. When true, disabled items are
focusable but not interactive. When false, disabled items are skipped during navigation.
focusMode
InputSignal<"roving" | "activedescendant">The focus strategy used by the list.
roving: Focus is moved to the active item usingtabindex.activedescendant: Focus remains on the listbox container, andaria-activedescendantis used to indicate the active item.
selectionMode
InputSignal<"follow" | "explicit">The selection strategy used by the list.
follow: The focused item is automatically selected.explicit: Items are selected explicitly by the user (e.g., via click or spacebar).
typeaheadDelay
InputSignal<number>The amount of time before the typeahead search is reset.
disabled
InputSignalWithTransform<boolean, unknown>Whether the listbox is disabled.
readonly
InputSignalWithTransform<boolean, unknown>Whether the listbox is readonly.
values
ModelSignal<V[]>The values of the currently selected items.
scrollActiveItemIntoView
voidScrollIntoViewOptionsvoidgotoFirst
voidNavigates to the first item in the listbox.
voidDescription
Represents a container used to display a list of items for a user to select from.
The ngListbox is meant to be used in conjunction with ngOption directives to create a
selectable list. It supports single and multiple selection modes, as well as various focus and
orientation strategies.
<ul ngListbox [(value)]="selectedItems" [multi]="true" orientation="vertical"> @for (item of items; track item.id) { <li ngOption [value]="item.id" [label]="item.name" [disabled]="item.disabled"> {{item.name}} </li> }</ul>