Form

Listbox

A list of options shown inline — one value or several, with checkboxes, search, groups and long virtual lists.

Features12

API

Theming

Basic

One value from an inline list. Focus it with Tab and move with the arrows.

Value: lviv

Multiple

multiple keeps several values; Shift + arrows add while moving, Ctrl / ⌘ + A selects all.

Value: kyiv,odesa

9 lines

<div class="stack">  <tx-listbox    [options]="cities"    [formControl]="city"    [multiple]="true"    [ariaLabel]="'Cities'"  />  <span class="hint">Value: {{ city.value ?? '—' }}</span></div>

Checkbox

checkbox shows a checkbox on each option.

Value: lviv

9 lines

<div class="stack">  <tx-listbox    [options]="cities"    [formControl]="city"    [checkbox]="true"    [ariaLabel]="'Cities'"  />  <span class="hint">Value: {{ city.value ?? '—' }}</span></div>

Meta key

With metaKeySelection a plain click replaces the selection, Ctrl / ⌘ + click adds to it — like a file list.

Value:

10 lines

<div class="stack">  <tx-listbox    [options]="cities"    [formControl]="city"    [multiple]="true"    [metaKeySelection]="true"    [ariaLabel]="'Cities'"  />  <span class="hint">Value: {{ city.value ?? '—' }}</span></div>

Filter

A search field above the list; keys from the field move through the options.

Value: lviv

4 lines

<div class="stack">  <tx-listbox [options]="cities" [formControl]="city" [filter]="true" [ariaLabel]="'City'" />  <span class="hint">Value: {{ city.value ?? '—' }}</span></div>

Groups

Options in named groups.

Template

Own option markup with txSelectOption; disabled options are skipped.

14 lines

<tx-listbox  [options]="files"  [optionLabel]="'name'"  [optionValue]="'name'"  [ariaLabel]="'Attachment'">  <ng-template txSelectOption let-file>    <span class="file">      <tx-icon [name]="file.icon" />      <span class="file__name">{{ file.name }}</span>      <span class="hint">{{ file.size }}</span>    </span>  </ng-template></tx-listbox>

Virtual scroll

Thousands of options rendered virtually, with search.

Field

Inside tx-field the label names the list and the hint and the error describe it.

Notification days

Pick at least one day

States

Invalid, disabled and read-only.

10 lines

<div class="row">  <tx-listbox [options]="plans" [invalid]="true" [ariaLabel]="'Invalid'" />  <tx-listbox [options]="plans" [formControl]="locked" [ariaLabel]="'Disabled'" />  <tx-listbox    [options]="plans"    [formControl]="shown"    [readonly]="true"    [ariaLabel]="'Read only'"  /></div>

Design tokens

dt changes the listbox tokens of one list.

Pass through

Your classes and styles on inner parts.