Navigation
Tree
A tree you expand like folders. Branches open and close, and arrow keys move through them.
ReactVueWeb Components
View in Storybook Playground
Examples
<Tree aria-label="ファイル" nodes={tree} defaultExpanded={['src']} onSelect={open} />Props
| Name | Type | Default | Description |
|---|---|---|---|
nodes required | TreeNode[] | — | Root nodes. |
expanded | string[] | — | Controlled expanded ids. |
defaultExpanded | string[] | — | Initial expanded ids when uncontrolled. @default [] |
onExpandedChange | (ids: string[]) => void | — | Called with the expanded ids. |
selected | string | null | — | Controlled selected id. |
defaultSelected | string | null | — | Initial selected id when uncontrolled. @default null |
onSelect | (id: string) => void | — | Called with the selected id. |
aria-label | string | — | Accessible label for the tree. |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.