Search
Cascader

Cascade selection box.

Cascader

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.


Basic Usage

Basic Usage, set data source of autocomplete with options property.

Default value

Specifies default value by an array.
PDF / Example / Example 1.1

Custom trigger

Separate trigger button and result.
Unselect 

Hover

Hover to expand sub menu, click to select option.

Disabled option

Disable option by specifying the disabled property in options.

Change on select

Allow only select parent options.

Custom render

For instance, add an external link after the selected value.
PDF / Example (15 Mb)

Load Options Lazily

Load options lazily with loadData.
Note: loadData cannot work with showSearch.
Search and select options directly.
Note: Now, Cascader[showSearch] doesn't support search on server, more info #5547

Custom Field Names

Custom field names.

API

PropertyDescriptionTypeDefault
allowClear
whether allow clear
boolean
true
autoFocus
get focus when component mounted
boolean
false
bordered
whether has border style
boolean
true
changeOnSelect
change value on each selection if set to true, see above demo for details
boolean
false
className
additional css class
string
-
defaultValue
initial selected value
string[] | number[]
[]
disabled
whether disabled select
boolean
false
displayRender
render function of displaying selected options
(label, selectedOptions) => ReactNode
abel => label.join(' / ')
expandTrigger
expand current item when click or hover, one of 'click' 'hover'
string
click
fieldNames
custom field name for label and value and children
object
{ label: 'label', value: 'value', children: 'children' }
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
loadData
To load option lazily, and it cannot work with showSearch
(selectedOptions) => void
-
notFoundContent
Specify content to show when no result matches.
string
Not Found
options
data options of cascade
Option[]
-
placeholder
input placeholder
string
'Please select'
popupClassName
additional className of popup overlay
string
-
popupPlacement
use preset popup align config from builtinPlacements：bottomLeft bottomRight topLeft topRight
string
bottomLeft
popupVisible
set visible of cascader popup
boolean
-
showSearch
Whether show search input in single mode.
boolean|object
false
size
input size
large | middle | small
style
additional style
CSSProperties
-
suffixIcon
The custom suffix icon
ReactNode
-
value
selected value
string[] | number[]
-
onChange
callback when finishing cascader select
(value, selectedOptions) => void
-
onPopupVisibleChange
callback when popup shown or hidden
(value) => void
-
Fields in showSearch:
PropertyDescriptionTypeDefault
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
limit
Set the count of filtered items
number | false
50
matchInputWidth
Whether the width of result list equals to input's
boolean
render
Used to render filtered options.
function(inputValue, path): ReactNode
sort
Used to sort filtered options.
function(a, b, inputValue)

Methods

NameDescriptionVersion
blur()
remove focus
focus()
get focus