Cascader
Two-panel hierarchical selector for picking a leaf value from a nested tree (categories → subcategories → leaf). Features: - Two-column layout: categories on…
Two-panel hierarchical selector for picking a leaf value from a nested tree (categories → subcategories → leaf).
Features: - Two-column layout: categories on left, options on right - Single or multiple selection modes - Search/filter functionality via TagInput - Category-level selection (select/deselect all children) - Indeterminate state for partial selections - Tag display for multiple selections - Keyboard navigation support - Disabled state support
import { Cascader } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
options | Required | CascaderOption[] | — | Hierarchical options to display in the cascader Parent options with children appear in the left panel Child options appear in the right panel when parent is selected |
value | Optional | CascaderValue | CascaderValue[] | undefined | — | Current selected value(s) - For single select: CascaderValue (e.g., ['category', 'option']) - For multiple select: CascaderValue[] (e.g., [['cat1', 'opt1'], ['cat2', 'opt2']]) |
onChange | Optional | ((value: CascaderValue | CascaderValue[] | null) => void) | undefined | — | Callback when selection changes - For single select: receives CascaderValue or null - For multiple select: receives CascaderValue[] or null |
multiple | Optional | boolean | undefined | false | Enable multiple selection mode - true: Shows checkboxes, allows multiple selections, displays selected items as tags - false: Shows radio buttons, allows single selection |
placeholder | Optional | string | undefined | 'Select...' | Placeholder text shown in the input when no selections are made |
disabled | Optional | boolean | undefined | false | Disable the entire cascader (input and all options) |
className | Optional | string | undefined | — | Custom className for the root cascader element |
dropdownClassName | Optional | string | undefined | — | Custom className for the dropdown panels container |
Usage
A two-panel hierarchical selection component. The left panel lists categories; the right panel shows their children. Supports single and multiple selection modes and a flat search view.
Notes
- Typing in the input switches from the two-panel view to a flat search results list.
- In
multiplemode, clicking a category header checkbox selects/deselects all its non-disabled children; partial selections show an indeterminate state.
Example
/** * Runnable example for Cascader. */import { useState } from 'react'import { Cascader } from '@tetherto/mdk-react-devkit'import type { CascaderValue } from '@tetherto/mdk-react-devkit'const poolOptions = [ { value: 'foundry', label: 'Foundry', children: [ { value: 'eu-primary', label: 'EU Primary' }, { value: 'us-east', label: 'US East' }, { value: 'asia', label: 'Asia Pacific' }, ], }, { value: 'antpool', label: 'AntPool', children: [ { value: 'btc', label: 'BTC' }, { value: 'ltc', label: 'LTC' }, ], },]export const CascaderExample = () => { const [single, setSingle] = useState<CascaderValue>(['foundry', 'eu-primary']) const [multi, setMulti] = useState<CascaderValue[]>([ ['foundry', 'eu-primary'], ['antpool', 'btc'], ]) return ( <div className="mdk-example-col"> <Cascader options={poolOptions} value={single} onChange={(value) => setSingle(value as CascaderValue)} placeholder="Select pool..." /> <Cascader options={poolOptions} value={multi} onChange={(value) => setMulti(value as CascaderValue[])} multiple placeholder="Select pools..." /> </div> )}