• 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

any

A unique identifier for the listbox.

element

HTMLElement

A reference to the host element.

textDirection

any

A signal wrapper for directionality.

items

any

The Option UIPatterns of the child Options.

orientation

any

Whether the list is vertically or horizontally oriented.

multi

any

Whether multiple items in the list can be selected at once.

wrap

any

Whether focus should wrap when navigating.

softDisabled

any

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

any

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

any

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

any

The amount of time before the typeahead search is reset.

disabled

any

Whether the listbox is disabled.

readonly

any

Whether the listbox is readonly.

values

any

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