Data Entry

Cascader

A multi-level select component that unfolds hierarchically — category → subcategory → value. Ideal for location pickers, category trees, and nested classifications.

Installation

npx benflux-ui add cascader

Hover to expand

<Cascader
  options={options}
  expandTrigger="hover"
  separator=" > "
  placeholder="Hover to expand..."
/>

Props

Prop	Type	Default	Description
options*	CascaderOption[]	—	Hierarchical option tree
value	string[]	—	Controlled value — array of keys from root to selected leaf
defaultValue	string[]	[]	Initial value (uncontrolled)
onChange	(value: string[], selectedOptions: CascaderOption[]) => void	—	Called when a leaf option is selected
placeholder	string	"Select..."	Trigger placeholder
allowClear	boolean	false	Show a clear button
separator	string	" / "	Character used to join label segments in the trigger
expandTrigger	"click" \| "hover"	"click"	How child menus are opened
disabled	boolean	false	Disable the trigger
notFoundContent	string	"No options"	Shown when a menu is empty

CascaderOption

interface CascaderOption {
  value: string
  label: string
  disabled?: boolean
  children?: CascaderOption[]
}