Cascader
@xui/cascaderA cascading column select — each level opens the next column of children; choosing a leaf commits the whole path. value is the array of chosen values.
Install
pnpm add @xui/cascader Add the barrel to a standalone component's imports:
import { XuiCascaderImports } from '@xui/cascader';
@Component({
imports: [XuiCascaderImports],
// …
})Examples
Basic
Loading preview…
<div class="flex flex-col gap-4">
<xui-cascader [options]="options" [(value)]="value" placeholder="Select location" />
<span class="text-foreground-muted text-sm">Path: {{ value.join(' / ') || '—' }}</span>
</div>Preselected
Loading preview…
<xui-cascader [options]="options" [(value)]="value" />API
A cascading, column-based select. Each level opens the next column of children; choosing a leaf commits the full path. value is a two-way bindable array of values from root to leaf.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''optionsXuiCascaderOption[]The root options. Each may carry children, which become the next column when it is selected.[]valuestring[]The selected path, as option values from the root down. Two-way bindable with [(value)].[]placeholderstringTrigger text shown while nothing is selected.'Select'disabledbooleanBlock interaction and dim the trigger. The panel cannot be opened.false