FileTree

Stable

A TreeView preset for folders and files, with open and closed folder icons.

Use FileTree to browse uploaded assets, exported templates or any folder structure. It is a TreeView with folder and file icons chosen by extension, so it shares the same keyboard model, selection and props. Pass getFileIcon to customise file icons.

Source Edit docs Report an issue

Overview

brand-assets
- logos
  - binds-wordmark-dark.svg
  - binds-wordmark-light.svg
- brand-guidelines.pdf
signatures
README.md

tsx

import { FileTree } from '@bindshq/stance-react';
import type { TreeItem } from '@bindshq/stance-react';

const files: TreeItem[] = [
  {
    id: 'brand',
    label: 'brand-assets',
    children: [
      {
        id: 'logos',
        label: 'logos',
        children: [
          { id: 'logo-dark', label: 'binds-wordmark-dark.svg' },
          { id: 'logo-light', label: 'binds-wordmark-light.svg' },
        ],
      },
      { id: 'guide', label: 'brand-guidelines.pdf' },
    ],
  },
  {
    id: 'signatures',
    label: 'signatures',
    children: [
      { id: 'sales-html', label: 'sales.html' },
      { id: 'support-html', label: 'support.html' },
      { id: 'users-csv', label: 'org-users.csv' },
    ],
  },
  { id: 'readme', label: 'README.md' },
];

export function Basic() {
  return <FileTree items={files} defaultExpanded={['brand', 'logos']} style={{ width: 300 }} />;
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

brand-assets
- logos
  - binds-wordmark-dark.svg
  - binds-wordmark-light.svg
- brand-guidelines.pdf
signatures
README.md

Light

brand-assets
- logos
  - binds-wordmark-dark.svg
  - binds-wordmark-light.svg
- brand-guidelines.pdf
signatures
README.md

Dark

brand-assets
- logos
  - binds-wordmark-dark.svg
  - binds-wordmark-light.svg
- brand-guidelines.pdf
signatures
README.md

High contrast

Import

tsx

import { FileTree } from '@bindshq/stance-react';

Examples

Opening files

onAction fires on Enter or click.

brand-assets
signatures
- sales.html
- support.html
- org-users.csv
README.md

tsx

import { FileTree } from '@bindshq/stance-react';
import type { TreeItem } from '@bindshq/stance-react';

const files: TreeItem[] = [
  {
    id: 'brand',
    label: 'brand-assets',
    children: [
      {
        id: 'logos',
        label: 'logos',
        children: [
          { id: 'logo-dark', label: 'binds-wordmark-dark.svg' },
          { id: 'logo-light', label: 'binds-wordmark-light.svg' },
        ],
      },
      { id: 'guide', label: 'brand-guidelines.pdf' },
    ],
  },
  {
    id: 'signatures',
    label: 'signatures',
    children: [
      { id: 'sales-html', label: 'sales.html' },
      { id: 'support-html', label: 'support.html' },
      { id: 'users-csv', label: 'org-users.csv' },
    ],
  },
  { id: 'readme', label: 'README.md' },
];

export function OpenOnAction() {
  return (
    <FileTree
      items={files}
      defaultExpanded={['signatures']}
      onAction={(item) => {
        if (!item.children) window.alert(`Opening ${item.label}`);
      }}
      style={{ width: 300 }}
    />
  );
}

Custom file icons

brand-assets
signatures
- sales.html
- support.html
- org-users.csv
README.md

tsx

import { FileTree } from '@bindshq/stance-react';
import type { TreeItem } from '@bindshq/stance-react';

const files: TreeItem[] = [
  {
    id: 'brand',
    label: 'brand-assets',
    children: [
      {
        id: 'logos',
        label: 'logos',
        children: [
          { id: 'logo-dark', label: 'binds-wordmark-dark.svg' },
          { id: 'logo-light', label: 'binds-wordmark-light.svg' },
        ],
      },
      { id: 'guide', label: 'brand-guidelines.pdf' },
    ],
  },
  {
    id: 'signatures',
    label: 'signatures',
    children: [
      { id: 'sales-html', label: 'sales.html' },
      { id: 'support-html', label: 'support.html' },
      { id: 'users-csv', label: 'org-users.csv' },
    ],
  },
  { id: 'readme', label: 'README.md' },
];

export function CustomIcons() {
  return (
    <FileTree
      items={files}
      defaultExpanded={['signatures']}
      getFileIcon={(item) =>
        item.label.endsWith('.csv') ? 'users' : item.label.endsWith('.html') ? 'mail' : 'file'
      }
      style={{ width: 300 }}
    />
  );
}

API reference

Prop	Type	Default	Description
`items`* required	`TreeItem[]`	None	Folders are items with children.
`aria-label`	`string`	`'Files'`	Name of the tree.
`getFileIcon`	`(item: TreeItem) => IconName`	None	Icon for each file; defaults to an extension-based icon.
`...TreeViewProps`	`TreeViewProps`	None	selectionMode, selected, expanded, onAction, size and every other TreeView prop.

Accessibility

Inherits TreeView semantics: tree, treeitem and group roles with levels, positions, expansion and selection state.
Folder state is conveyed by aria-expanded, not only by the open-folder icon.
Icons are decorative and hidden from assistive technology.

Keyboard

Keys	Action
`↑` `↓`	Move between visible items.
`→` `←`	Open / close folders and move between parent and child.
`Enter`	Open the file (onAction).
`a to z`	Jump to an item by name.

Usage guidelines

Do

Sort folders before files.
Show full file names, including extensions.

Don’t

Use FileTree for non-file hierarchies; use TreeView.

Overview

brand-assets
- logos
  - binds-wordmark-dark.svg
  - binds-wordmark-light.svg
- brand-guidelines.pdf
signatures
README.md

tsx

import { FileTree } from '@bindshq/stance-react';
import type { TreeItem } from '@bindshq/stance-react';

const files: TreeItem[] = [
  {
    id: 'brand',
    label: 'brand-assets',
    children: [
      {
        id: 'logos',
        label: 'logos',
        children: [
          { id: 'logo-dark', label: 'binds-wordmark-dark.svg' },
          { id: 'logo-light', label: 'binds-wordmark-light.svg' },
        ],
      },
      { id: 'guide', label: 'brand-guidelines.pdf' },
    ],
  },
  {
    id: 'signatures',
    label: 'signatures',
    children: [
      { id: 'sales-html', label: 'sales.html' },
      { id: 'support-html', label: 'support.html' },
      { id: 'users-csv', label: 'org-users.csv' },
    ],
  },
  { id: 'readme', label: 'README.md' },
];

export function Basic() {
  return <FileTree items={files} defaultExpanded={['brand', 'logos']} style={{ width: 300 }} />;
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

brand-assets
- logos
  - binds-wordmark-dark.svg
  - binds-wordmark-light.svg
- brand-guidelines.pdf
signatures
README.md

Light

brand-assets
- logos
  - binds-wordmark-dark.svg
  - binds-wordmark-light.svg
- brand-guidelines.pdf
signatures
README.md

Dark

brand-assets
- logos
  - binds-wordmark-dark.svg
  - binds-wordmark-light.svg
- brand-guidelines.pdf
signatures
README.md

High contrast

Examples

Opening files

onAction fires on Enter or click.

brand-assets
signatures
- sales.html
- support.html
- org-users.csv
README.md

tsx

import { FileTree } from '@bindshq/stance-react';
import type { TreeItem } from '@bindshq/stance-react';

const files: TreeItem[] = [
  {
    id: 'brand',
    label: 'brand-assets',
    children: [
      {
        id: 'logos',
        label: 'logos',
        children: [
          { id: 'logo-dark', label: 'binds-wordmark-dark.svg' },
          { id: 'logo-light', label: 'binds-wordmark-light.svg' },
        ],
      },
      { id: 'guide', label: 'brand-guidelines.pdf' },
    ],
  },
  {
    id: 'signatures',
    label: 'signatures',
    children: [
      { id: 'sales-html', label: 'sales.html' },
      { id: 'support-html', label: 'support.html' },
      { id: 'users-csv', label: 'org-users.csv' },
    ],
  },
  { id: 'readme', label: 'README.md' },
];

export function OpenOnAction() {
  return (
    <FileTree
      items={files}
      defaultExpanded={['signatures']}
      onAction={(item) => {
        if (!item.children) window.alert(`Opening ${item.label}`);
      }}
      style={{ width: 300 }}
    />
  );
}

Custom file icons

brand-assets
signatures
- sales.html
- support.html
- org-users.csv
README.md

tsx

import { FileTree } from '@bindshq/stance-react';
import type { TreeItem } from '@bindshq/stance-react';

const files: TreeItem[] = [
  {
    id: 'brand',
    label: 'brand-assets',
    children: [
      {
        id: 'logos',
        label: 'logos',
        children: [
          { id: 'logo-dark', label: 'binds-wordmark-dark.svg' },
          { id: 'logo-light', label: 'binds-wordmark-light.svg' },
        ],
      },
      { id: 'guide', label: 'brand-guidelines.pdf' },
    ],
  },
  {
    id: 'signatures',
    label: 'signatures',
    children: [
      { id: 'sales-html', label: 'sales.html' },
      { id: 'support-html', label: 'support.html' },
      { id: 'users-csv', label: 'org-users.csv' },
    ],
  },
  { id: 'readme', label: 'README.md' },
];

export function CustomIcons() {
  return (
    <FileTree
      items={files}
      defaultExpanded={['signatures']}
      getFileIcon={(item) =>
        item.label.endsWith('.csv') ? 'users' : item.label.endsWith('.html') ? 'mail' : 'file'
      }
      style={{ width: 300 }}
    />
  );
}

API reference

Prop	Type	Default	Description
`items`* required	`TreeItem[]`	None	Folders are items with children.
`aria-label`	`string`	`'Files'`	Name of the tree.
`getFileIcon`	`(item: TreeItem) => IconName`	None	Icon for each file; defaults to an extension-based icon.
`...TreeViewProps`	`TreeViewProps`	None	selectionMode, selected, expanded, onAction, size and every other TreeView prop.

Accessibility

Inherits TreeView semantics: tree, treeitem and group roles with levels, positions, expansion and selection state.

Folder state is conveyed by aria-expanded, not only by the open-folder icon.

Icons are decorative and hidden from assistive technology.

Keyboard

Keys	Action
`↑` `↓`	Move between visible items.
`→` `←`	Open / close folders and move between parent and child.
`Enter`	Open the file (onAction).
`a to z`	Jump to an item by name.

Overview

Light, dark and high contrast

Import

Examples

Opening files

Custom file icons

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Examples

Opening files

Custom file icons

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related