@kit-ng-ui/cascader

Hierarchical select with column drill-down. The user clicks an option to reveal its children in the next column; the final selection is the path through the hierarchy.

Install

pnpm add @kit-ng-ui/cascader

@use '@kit-ng-ui/popover/styles' as popover;
@use '@kit-ng-ui/cascader/styles' as cascader;

Usage

options: KitCascaderOption[] = [
  {
    value: 'asia',
    label: 'Asia',
    children: [
      { value: 'vn', label: 'Vietnam' },
      { value: 'jp', label: 'Japan' },
    ],
  },
];

<kit-cascader [options]="options" [(value)]="region" placeholder="Region…" />

API

| Input | Type | Default | | ---------------- | --------------------------------------------- | ------------ | | options | ReadonlyArray<KitCascaderOption> | [] | | value | ReadonlyArray<string> (two-way) | [] | | placeholder | string | 'Select' | | disabled | boolean | false | | changeOnSelect | boolean | false | | displayRender | ((labels: ReadonlyArray<string>) => string) \| null | null |

Set changeOnSelect="true" to commit on every drill (intermediate nodes become valid selections). v0.1 defers search filter and hover-trigger to later.