'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
TreeSelect
A select whose options are a tree, single or multiple.
Ant Design: TreeSelect
import { TreeSelect } from '@alea/ui';
Examples
TreeSelect
Single or multiple choice from a tree.
Featured
Show in the menu
Props
TreeSelect props
A select whose options are a tree: categories, folders, org charts (Ant's TreeSelect).
| Prop | Type | Default | Description |
|---|---|---|---|
nodesrequired | TreeNode[] | - | The tree: id, label, children. |
defaultValue | Key[] | - | The selected id to start with. |
isDisabled | boolean | - | Disables every part of it. |
label | ReactNode | - | The visible label. |
onChange | ((keys: Key[]) => void) | - | Called with the selected id. |
placeholder | string | 'Select…' | Shown while there is no value. |
selectionMode | "single" | "multiple" | 'single' | single (default) or multiple. |
value | Key[] | - | The selected id (controlled). |
Accessibility
- The options are a tree grid: arrows open and close branches.
Keyboard
| Key | Does |
|---|---|
| Enter or Space | Opens the tree |
| Arrow keys | Move; Right expands, Left collapses |
| Enter | Picks the item |
| Escape | Closes |
Do and don't
Do
- Use it to pick a folder or category from a tree.
- Expand the path to the current value when it opens.
Don't
- Don't use it for flat lists: use Select.
- Don't hide the selected item's parents.