'/%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}
Data display
Tree
Nested items that expand and collapse: files, categories, outlines.
Ant Design: Tree
import { Tree, TreeItem } from '@alea/ui';
Examples
Tree
Folders that open and close.
src
components
index.ts
tokens.css
Selection
Pick several files; Space selects, arrows move.
tokens
colors.json
type.json
space.json
Props
Tree props
Nested items that expand and collapse: files, categories, outlines. Arrow right opens, left closes.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | - | Defines a string value that labels the current element. (React Aria) |
autoFocus | boolean | FocusStrategy | - | Whether to auto focus the gridlist or an option. (React Aria) |
children | ReactNode | ((item: T) => ReactNode) | - | The contents of the collection. (React Aria) |
className | ClassNameOrFunction<TreeRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. (React Aria) |
defaultExpandedKeys | Iterable<Key> | - | The initial expanded keys in the collection (uncontrolled). (React Aria) |
defaultSelectedKeys | Iterable<Key> | "all" | - | The initial selected keys in the collection (uncontrolled). (React Aria) |
disabledKeys | Iterable<Key> | - | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. (React Aria) |
expandedKeys | Iterable<Key> | - | The currently expanded keys in the collection (controlled). (React Aria) |
id | string | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). (React Aria) |
onExpandedChange | ((keys: Set<Key>) => any) | - | Handler that is called when items are expanded or collapsed. (React Aria) |
onSelectionChange | ((keys: Selection) => void) | - | Handler that is called when the selection changes. (React Aria) |
selectedKeys | Iterable<Key> | "all" | - | The currently selected keys in the collection (controlled). (React Aria) |
selectionMode | "single" | "multiple" | "none" | - | The type of selection that is allowed in the collection. (React Aria) |
style | StyleOrFunction<DisclosureGroupRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. (React Aria) |
TreeItem props
An item in a Tree; nest TreeItems inside for children.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | - | The item's label. |
children | ReactNode | - | Nested TreeItems. |
icon | ReactNode | - | An icon before the title. |
textValue | string | - | Text for typeahead and screen readers when title is not plain text. |
Accessibility
- A treegrid; expanded state is announced.
Keyboard
| Key | Does |
|---|---|
| Arrow Right | Expands or moves to the first child |
| Arrow Left | Collapses or moves to the parent |
| Arrow Up / Down | Move |
Do and don't
Do
- Give each item a textValue so typeahead works.
- Keep trees shallow: three or four levels.
Don't
- Don't use a tree for flat lists.
- Don't load thousands of nodes at once: load children when expanded.