# File tree

Folders and files as a real tree, printed like a wiring diagram: traces with an elbow into every item, chevrons that turn, and the chosen file set in a recess with its lamp lit. Written as a plain nested list.

Kit part · With the Kit · https://tactileui.dev/parts/file-tree

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

How it is built, line by line, comes with its code and styling.

## Variants

- Folders closed
- With meta

## States

- Rest
- Hover
- Focus
- Chosen

## Props and options

| Name | Kind | Description |
| - | - | - |
| label | attribute |  |
| data-open | attribute | Starts open. Folders on the path to the chosen item open anyway. |
| data-meta | attribute | A short fact at the row’s end: a size, a count. |
| value | property | The chosen item’s path, names joined by “/”. |
| change | event | A different item was chosen. |
| ArrowDown · ArrowUp | keyboard | Next and previous visible item. |
| ArrowRight · ArrowLeft | keyboard | Open a folder, then step into it; close it, then step out to its parent. |
| Home · End | keyboard | First and last visible item. |
| Enter · Space | keyboard | Choose the item; on a folder, also open or close it. |
| * | keyboard | Open every folder beside the focused one. |
| Letters | keyboard | Jump to the next item whose name starts with what you typed. |

## Usage notes

Click, or Tab in and use the arrows: Right opens, Left closes, Home/End, and type a name to jump. Enter chooses.

## Accessibility

- The WAI-ARIA tree view pattern. The part writes all of it from plain markup.
- One tab stop for the whole tree (roving tabindex); the arrows do the rest. The focus ring draws on the row, not the whole subtree.
- Icons and chevrons are hidden from screen readers; the name is read once.

## Related parts

- [Side rail](https://tactileui.dev/parts/side): App navigation in a panel: the current page is a recess with its lamp lit, links grouped under printed labels.
- [List](https://tactileui.dev/parts/list): Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.