Cascader

Single-select hierarchical picker. The trigger matches Select. Choosing a branch opens the next column; choosing a leaf commits and closes. Multiple selection and filtering are follow-ups. check-strategy defaults to child for that follow-up and is ignored in v1.

Demos

Region

The panel uses z-index 4000, plus 10 for each nested overlay. Click outside or press Esc to close.

tw / tpe / daan

<gk-cascader :options="options" :value="region" clearable placeholder="請選擇地區" @change="onRegion"></gk-cascader>

Placeholder

<gk-cascader placeholder="請選擇地區"></gk-cascader>

Sizes

<gk-cascader size="sm" placeholder="sm"></gk-cascader>

Status and disabled

<gk-cascader status="success" placeholder="已核對地址"></gk-cascader>
<gk-cascader status="warning" placeholder="請再確認行政區"></gk-cascader>
<gk-cascader status="error" placeholder="必填"></gk-cascader>

Empty

An empty options list shows「沒有資料」when the document language is Chinese, otherwise “No data”. Replace it with the empty slot.

<gk-cascader open placeholder="沒有資料"></gk-cascader>

API

Properties

Name	Type	Default	Notes
value	string[] | null	null	Path from root to leaf
options	CascaderOption[]	[]	{ label, value, children?, disabled? }
placeholder	string	''
separator	string	' / '
size	sm | md | lg	md
clearable	boolean	false
status	success | warning | error	—
expand-trigger	click | hover	click
placement	bottom-start | top-start	bottom-start	Flips when space is tight
column-width	number	160
filterable / multiple	boolean	false	Present, not implemented in v1
check-strategy	child | parent | all	child	Ignored until multiple ships

Events

Name	Detail
change, update:value	{ value, option }
clear

Parts

trigger, value, placeholder, clear, chevron, panel, column, option, empty.