Form

CascadeSelect

Pick a value through nested groups shown as columns.

Features4

API

Theming

Basic

Country → region → city. ArrowRight opens a group, ArrowLeft goes back.

Value: —

13 lines

<div class="stack">  <tx-cascade-select    [options]="places"    [formControl]="office"    [optionLabel]="'city'"    [optionValue]="'code'"    [optionGroupLabel]="'name'"    [optionGroupChildren]="['regions', 'cities']"    [optionDisabled]="'closed'"    [placeholder]="'Office'"  />  <span class="hint">Value: {{ office.value ?? '—' }}</span></div>

Path

showPath shows the whole path in the field; changed gives the groups along the way.

Levels picked: 3

15 lines

<div class="stack">  <tx-cascade-select    [options]="places"    [formControl]="office"    [optionLabel]="'city'"    [optionValue]="'code'"    [optionGroupLabel]="'name'"    [optionGroupChildren]="['regions', 'cities']"    [showPath]="true"    [showClear]="true"    [placeholder]="'Office'"    (changed)="onChange($event)"  />  <span class="hint">Levels picked: {{ levels() }}</span></div>

States

Sizes, filled variant, disabled and read-only.

39 lines

<div class="stack">  <tx-cascade-select    [options]="places"    [size]="'small'"    [optionLabel]="'city'"    [optionValue]="'code'"    [optionGroupLabel]="'name'"    [optionGroupChildren]="['regions', 'cities']"    [placeholder]="'Small'"  />  <tx-cascade-select    [options]="places"    [variant]="'filled'"    [optionLabel]="'city'"    [optionValue]="'code'"    [optionGroupLabel]="'name'"    [optionGroupChildren]="['regions', 'cities']"    [placeholder]="'Filled'"  />  <tx-cascade-select    [options]="places"    [formControl]="locked"    [optionLabel]="'city'"    [optionValue]="'code'"    [optionGroupLabel]="'name'"    [optionGroupChildren]="['regions', 'cities']"    [ariaLabel]="'Disabled'"  />  <tx-cascade-select    [options]="places"    [formControl]="shown"    [readonly]="true"    [optionLabel]="'city'"    [optionValue]="'code'"    [optionGroupLabel]="'name'"    [optionGroupChildren]="['regions', 'cities']"    [ariaLabel]="'Read only'"  /></div>

Design tokens

dt changes the cascadeSelect tokens — the width of the columns and their border.

9 lines

<tx-cascade-select    [options]="places"    [optionLabel]="'city'"    [optionValue]="'code'"    [optionGroupLabel]="'name'"    [optionGroupChildren]="['regions', 'cities']"    [placeholder]="'Office'"    [dt]="{ root: { columnWidth: '160px', columnBorderColor: 'transparent' } }"  />