ant-design/components/cascader/index.en-US.md

category	type	title
Components	Data Entry	Cascader

Cascade selection box.

When To Use

• When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
• When selecting from a large data set, with multi-stage classification separated for easy selection.
• Chooses cascade items in one float layer for better user experience.

API

<Cascader options={options} onChange={onChange} />

Property	Description	Type	Default
options	data options of cascade	object	-
defaultValue	initial selected value	CascaderOptionType[]	[]
value	selected value	CascaderOptionType[]	-
onChange	callback when finishing cascader select	(value, selectedOptions) => void	-
onPopupVisibleChange	callback when popup shown or hidden	(value) => void	-
displayRender	render function of displaying selected options	(label, selectedOptions) => ReactNode	label => label.join(' / ')
style	additional style	string	-
className	additional css class	string	-
popupClassName	additional className of popup overlay	string	-
popupPlacement	use preset popup align config from builtinPlacements：bottomLeft bottomRight topLeft topRight	string	bottomLeft
placeholder	input placeholder	string	'Please select'
size	input size, one of large default small	string	default
disabled	whether disabled select	boolean	false
allowClear	whether allow clear	boolean	true
expandTrigger	expand current item when click or hover, one of 'click' 'hover'	string	'click'
changeOnSelect	change value on each selection if set to true, see above demo for details	boolean	false
showSearch	Whether show search input in single mode.	boolean|object	false
notFoundContent	Specify content to show when no result matches.	string	'Not Found'
loadData	To load option lazily, and it cannot work with showSearch	(selectedOptions) => void	-
getPopupContainer	Parent Node which the selector should be rendered to. Default to body. When position issues happen, try to modify it into scrollable content and position it relative.example	Function(triggerNode)	() => document.body

Fields in showSearch:

Property	Description	Type	Default
filter	The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded.	function(inputValue, path): boolean
render	Used to render filtered options.	function(inputValue, path): ReactNode
sort	Used to sort filtered options.	function(a, b, inputValue)
matchInputWidth	Whether the width of result list equals to input's	boolean