FileTree – Once UI

FileTree displays nested files and folders. Use the arrow keys to move through visible rows, expand or collapse folders, and select an item.

FileTree

src

components

Button.tsx

Dialog.tsx

App.tsx

package.json

<FileTree
defaultExpandedIds={["src", "components"]}
defaultSelectedId="button"
items={[
  {
    id: "src",
    name: "src",
    type: "folder",
    children: [
      {
        id: "components",
        name: "components",
        type: "folder",
        children: [
          { id: "button", name: "Button.tsx", type: "file", icon: "code" }
        ]
      }
    ]
  }
]}
/>

Data model

Each item has a unique id, a display name, and a discriminating type. Files may provide an optional icon; folders contain a recursive children array.

Tsx

type FileTreeItem =
  | { id: string; name: string; type: "file"; icon?: IconName }
  | { id: string; name: string; type: "folder"; icon?: IconName; children: FileTreeItem[] };

Controlled selection and expansion

Use selectedId with onSelect to control selection, and expandedIds with onExpandChange to control open folders. Omit those state props to let the component manage the state internally; use defaultSelectedId and defaultExpandedIds for initial state.

Tsx

<FileTree
  items={items}
  selectedId={selectedId}
  onSelect={(item) => setSelectedId(item.id)}
  expandedIds={expandedIds}
  onExpandChange={(ids) => setExpandedIds(ids)}
/>

onItemClick reports pointer clicks. renderItem replaces the row label and receives the item plus its selected, expanded, and depth state. emptyState and loadingState customize the corresponding placeholders; set loading to show the loading state.

API reference

	Type	Default
itemsrequired	FileTreeItem[]	—
selectedId	stringnull	—
defaultSelectedId	string	—
expandedIds	string[]	—
defaultExpandedIds	string[]	[]
onSelect	(item: FileTreeItem) => void	—
onExpandChange	(expandedIds: string[], item: FileTreeFolder) => void	—
onItemClick	(item: FileTreeItem) => void	—
renderItem	( item: FileTreeItem, state: { selected: boolean; expanded: boolean; depth: number }, ) => React.ReactNode	—
emptyState	React.ReactNode	—
loading	boolean	false
loadingState	React.ReactNode	—
aria-label	string	—
…and every FlexProps prop	inherited	—

Keyboard interaction

Up and Down move between visible rows; Home and End move to the first and last row.
Right opens a closed folder or focuses its first child.
Left closes an open folder or focuses its parent.
Enter and Space select the focused item.

The component uses the ARIA tree pattern and exposes selection and expansion state to assistive technology.