logo

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.

Examples

Cascade selection box for selecting province/city/district.

expand code expand code

Hover to expand sub menu, click to select option.

expand code expand code

Allow only select parent options.

expand code expand code

Specifies default value by an array.

expand code expand code

Disable option by specifying the disabled property in options. You can also disable an entire component through its Disabled parameter.

expand code expand code

Cascade selection box of different sizes.

expand code expand code

Cascader API#

Property Description Type Default Value
AllowClear ParameterWhether to allow clearing or not Boolean true
BoundaryAdjustMode ParameterOverlay adjustment strategy (when for example browser resize is happening) TriggerBoundaryAdjustMode --
ChangeOnSelect ParameterChange value on each selection if set to true, only chage on final selection if false. Boolean --
DefaultValue ParameterInitially selected value String --
ExpandTrigger ParameterWhen to expand the current item - click or hover String click
NotFoundContent ParameterEmpty description for when not found String No Data (in current locale)
Placeholder ParameterPlaceholder for input String Please select (in current locacle)
PopupContainerSelector ParameterElement to show popup container in String --
ShowSearch ParameterAllow searching or not Boolean --
Disabled ParameterDisable input or not Boolean --
OnChange ParameterCallback executed when the selected value changesInstead use SelectedNodesChanged.

Obsolete Will be removed in a future version.
Action<List<CascaderNode>, String, String> --
SelectedNodesChanged ParameterCallback executed when the selected value changes EventCallback<CascaderNode[]> --
Options ParameterOptions for the overlay IEnumerable<CascaderNode> --
Placement ParameterPlacement of the overlay Placement --
ValidationMessages Validation messages for the FormItem String[] --
AdditionalAttributes ParameterGets or sets a collection of additional attributes that will be applied to the created element. IReadOnlyDictionary<String, Object> --
Value ParameterGets or sets the value of the input. This should be used with two-way binding. String --
ValueChanged ParameterCallback that updates the bound value. EventCallback<String> --
ValueExpression ParameterAn expression that identifies the bound value. Expression<Func<String>> --
ValuesExpression ParameterAn expression that identifies the enumerable of bound values. Expression<Func<IEnumerable<String>>> --
Size ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` String AntSizeLDSType.Default
CultureInfo ParameterWhat Culture will be used when converting string to value and value to string Useful for InputNumber component. CultureInfo CultureInfo.CurrentCulture
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --

CascaderNode API#

Property Description Type Default Value
Label Label displayed for value String --
Value Value for when option is selected String --
Disabled Disable the option or not Boolean false
Children Options under this one IEnumerable<CascaderNode> --

TriggerBoundaryAdjustMode API#

Underlying Type: Int32

Name Description
None Do not auto adjust
InView The default, the viewport boundaries are the boundaries that are used for calculation if overlay is fully visible. Attempt to fit the overlay so it is always fully visible in the viewport. So if the overlay is outside of the viewport ("overflows"), then reposition calculation is going to be attempted.
InScroll The document boundaries are the boundaries used for calculation if overlay needs to be reposition. So even if the overlay is outside of the viewport, the overlay may still be shown as long as it does not "overflow" the document boundaries.
AutoComplete Checkbox
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.