Data input

Cascade select

Themed hierarchical select for multi-level option trees with hover or arrow-key sub-panel navigation.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjCascadeSelectComponent } from '@kouji-ui/components';

Loading editor

Playground

#playground

placeholder

regions

disabled

disable first leaf

<kj-cascade-select
  [(kjValue)]="selected"
  placeholder="Select a country"
>
  <kj-cascade-option kjValue="eu" kjLabel="Europe">
    <kj-cascade-sub-panel>
      <kj-cascade-option kjValue="fr" kjLabel="France" />
      <kj-cascade-option kjValue="de" kjLabel="Germany" />
      <kj-cascade-option kjValue="it" kjLabel="Italy" />
    </kj-cascade-sub-panel>
  </kj-cascade-option>
  <kj-cascade-option kjValue="am" kjLabel="Americas">
    <kj-cascade-sub-panel>
      <kj-cascade-option kjValue="us" kjLabel="United States" />
      <kj-cascade-option kjValue="br" kjLabel="Brazil" />
    </kj-cascade-sub-panel>
  </kj-cascade-option>
</kj-cascade-select>