• Overview
@angular/aria/listbox

Represents a container used to display a list of items for a user to select from.

API

    
      class Listbox<V> {}

id

InputSignal<any>

A unique identifier for the listbox.

element

HTMLElement

A reference to the host element.

textDirection

Signal<Direction>

A signal wrapper for directionality.

items

Signal<OptionPattern<V>[]>

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 using tabindex.
  • activedescendant: Focus remains on the listbox container, and aria-activedescendant is 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

void
@paramoptionsScrollIntoViewOptions
@returnsvoid

gotoFirst

void

Navigates to the first item in the listbox.

@returnsvoid

Description

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>
Jump to details