Cascader

Code

Install

Import

The axes

• variant takes outlined (the default), filled, borderless and underlined. It is inherited from ConfigProvider when not set, which is how a whole form moves at once.
• size takes small, medium (the default) and large, also inherited. middle still works as the old name for medium.
• status takes error and warning. A Form.Item sets it for you, so passing it by hand is for controls that live outside a form.
• expandTrigger takes click (the default) and hover. It changes behavior: hover only affects the mouse, and does nothing on touch or the keyboard.
• placement takes the four Select placements and defaults to bottomLeft, or bottomRight under dir="rtl".

Flags

• multiple puts a checkbox on every option and turns the value from Value[] into Value[][], one array per selected path. Pair it with showCheckedStrategy, which decides whether a fully checked branch reports its ancestor (Cascader.SHOW_PARENT, the default) or its leaves (Cascader.SHOW_CHILD). Both constants are exported with the component.
• changeOnSelect makes every node selectable, not only leaves, so a partial path is a valid value. It also widens search to the paths in between.
• showSearch is a flag that is also an object: pass true for the default behavior, or a SearchConfig to reach filter, render, sort and limit. The top-level searchValue and onSearch props are deprecated in favor of the same keys inside it.
• disabled takes the whole control out. Prefer disabled on the options you mean: the keyboard skips them, and a disabled branch disables everything under it.
• allowClear is on by default for Cascader, unlike most fields. Pass false where an empty value is not allowed.

Slots

• displayRender sets the text in the closed field. The default joins the path with  / , and keeps only the last label per tag with multiple, which is the case to override.
• optionRender draws one row inside a column of the popup. It replaces the label only. The checkbox, the chevron and the row's click handling stay.
• popupRender wraps the columns, for a footer or a hint beneath them. Anything focusable you put there is outside the field's key handling.
• children replaces the select input with a trigger of your own, which then has to be focusable and nameable by itself.
• expandIcon, loadingIcon and suffixIcon already come from your icon pack, as do clearIcon, removeIcon and searchIcon. Pass one only to change it for this instance.

Events

• onChange fires with the path and the matching option objects. Read the labels from that second argument.
• onOpenChange fires when the popup opens or closes, however it happened. onPopupVisibleChange and onDropdownVisibleChange are the deprecated spellings of the same thing.
• loadData fetches a level instead of reporting one. Set children on the last option it receives, and the spinner clears once that key appears. It never fires during a search.
• showSearch.onSearch is where search text arrives. The top-level onSearch still works and is deprecated.

Styling