# TreeProps

Source: /tuil/docs/reference/components/tree/tree-props
Locale: en

TreeProps component contract.



{/* Generated by tooling/docs/generate-reference.ts. */}

## Type [#type]

```ts
export interface TreeProps<TData = unknown>
  extends CommonComponentProps,
    SlottedComponentProps<
      TreeSlots,
      {
        readonly focused: boolean;
        readonly activeId?: string;
        readonly expanded: ReadonlySet<string>;
      }
    > {
  readonly items: readonly TreeItem<TData>[];
  readonly expandedIds?: readonly string[];
  readonly defaultExpandedIds?: readonly string[];
  readonly selectedId?: string;
  readonly defaultSelectedId?: string;
  readonly onExpandedChange?: (
    expanded: readonly string[],
  ) => void | Promise<void>;
  readonly onSelect?: (item: TreeItem<TData>) => void | Promise<void>;
  readonly height?: number;
  readonly staticLimit?: number;
  readonly autoFocus?: boolean;
}
```

## Members [#members]

| Member               | Type                                                                                                                                                                                                                                                                                                                             | Required | Description                                                                                                                                                                                                                                                                                                                                                                | Related types                                                                                                                                                                                |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `items`              | `readonly TreeItem<TData>[]`                                                                                                                                                                                                                                                                                                     | Yes      | The `items` member uses the `readonly TreeItem<TData>[]` contract.                                                                                                                                                                                                                                                                                                         | —                                                                                                                                                                                            |
| `expandedIds`        | `readonly string[] \| undefined`                                                                                                                                                                                                                                                                                                 | No       | The `expandedIds` member uses the `readonly string[] \| undefined` contract.                                                                                                                                                                                                                                                                                               | —                                                                                                                                                                                            |
| `defaultExpandedIds` | `readonly string[] \| undefined`                                                                                                                                                                                                                                                                                                 | No       | The `defaultExpandedIds` member uses the `readonly string[] \| undefined` contract.                                                                                                                                                                                                                                                                                        | —                                                                                                                                                                                            |
| `selectedId`         | `string \| undefined`                                                                                                                                                                                                                                                                                                            | No       | The `selectedId` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                           | —                                                                                                                                                                                            |
| `defaultSelectedId`  | `string \| undefined`                                                                                                                                                                                                                                                                                                            | No       | The `defaultSelectedId` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                    | —                                                                                                                                                                                            |
| `onExpandedChange`   | `((expanded: readonly string[]) => void \| Promise<void>) \| undefined`                                                                                                                                                                                                                                                          | No       | The `onExpandedChange` member uses the `((expanded: readonly string[]) => void \| Promise<void>) \| undefined` contract.                                                                                                                                                                                                                                                   | —                                                                                                                                                                                            |
| `onSelect`           | `((item: TreeItem<TData>) => void \| Promise<void>) \| undefined`                                                                                                                                                                                                                                                                | No       | The `onSelect` member uses the `((item: TreeItem<TData>) => void \| Promise<void>) \| undefined` contract.                                                                                                                                                                                                                                                                 | —                                                                                                                                                                                            |
| `height`             | `number \| undefined`                                                                                                                                                                                                                                                                                                            | No       | The `height` member uses the `number \| undefined` contract.                                                                                                                                                                                                                                                                                                               | —                                                                                                                                                                                            |
| `staticLimit`        | `number \| undefined`                                                                                                                                                                                                                                                                                                            | No       | The `staticLimit` member uses the `number \| undefined` contract.                                                                                                                                                                                                                                                                                                          | —                                                                                                                                                                                            |
| `autoFocus`          | `boolean \| undefined`                                                                                                                                                                                                                                                                                                           | No       | The `autoFocus` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                           | —                                                                                                                                                                                            |
| `variant`            | `string \| undefined`                                                                                                                                                                                                                                                                                                            | No       | The `variant` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                              | —                                                                                                                                                                                            |
| `size`               | `"sm" \| "md" \| "lg" \| undefined`                                                                                                                                                                                                                                                                                              | No       | The `size` member uses the `"sm" \| "md" \| "lg" \| undefined` contract.                                                                                                                                                                                                                                                                                                   | —                                                                                                                                                                                            |
| `unstyled`           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                           | No       | The `unstyled` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                            | —                                                                                                                                                                                            |
| `className`          | `string \| undefined`                                                                                                                                                                                                                                                                                                            | No       | The `className` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                            | —                                                                                                                                                                                            |
| `layout`             | `Partial<Omit<LayoutNodeInput, "children" \| "id" \| "semantics">> \| undefined`                                                                                                                                                                                                                                                 | No       | The `layout` member uses the `Partial<Omit<LayoutNodeInput, "children" \| "id" \| "semantics">> \| undefined` contract.                                                                                                                                                                                                                                                    | —                                                                                                                                                                                            |
| `id`                 | `string \| undefined`                                                                                                                                                                                                                                                                                                            | No       | The `id` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                                   | —                                                                                                                                                                                            |
| `testId`             | `string \| undefined`                                                                                                                                                                                                                                                                                                            | No       | The `testId` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                               | —                                                                                                                                                                                            |
| `role`               | `SemanticRole \| undefined`                                                                                                                                                                                                                                                                                                      | No       | The `role` member uses the `SemanticRole \| undefined` contract.                                                                                                                                                                                                                                                                                                           | [`SemanticRole`](/tuil/docs/reference/packages/core/api/semantic-role)                                                                                                                            |
| `label`              | `string \| undefined`                                                                                                                                                                                                                                                                                                            | No       | The `label` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                                | —                                                                                                                                                                                            |
| `description`        | `string \| undefined`                                                                                                                                                                                                                                                                                                            | No       | The `description` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                          | —                                                                                                                                                                                            |
| `disabled`           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                           | No       | The `disabled` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                            | —                                                                                                                                                                                            |
| `readOnly`           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                           | No       | The `readOnly` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                            | —                                                                                                                                                                                            |
| `selected`           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                           | No       | The `selected` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                            | —                                                                                                                                                                                            |
| `checked`            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                           | No       | The `checked` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                             | —                                                                                                                                                                                            |
| `expanded`           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                           | No       | The `expanded` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                            | —                                                                                                                                                                                            |
| `valueText`          | `string \| undefined`                                                                                                                                                                                                                                                                                                            | No       | The `valueText` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                            | —                                                                                                                                                                                            |
| `slots`              | `Partial<SlotComponents<&#123; root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; empty: import("ink").TextProps; overflow: import("ink").TextProps; &#125;>> \| undefined`                                                                                                          | No       | The `slots` member uses the `Partial<SlotComponents<&#123; root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; empty: import("ink").TextProps; overflow: import("ink").TextProps; &#125;>> \| undefined` contract.                                                                                                              | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotComponents`](/tuil/docs/reference/packages/theme/api/slot-components), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) |
| `slotProps`          | `Partial<SlotProps<&#123; root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; empty: import("ink").TextProps; overflow: import("ink").TextProps; &#125;, &#123; readonly focused: boolean; readonly activeId?: string; readonly expanded: ReadonlySet<string>; &#125;>> \| undefined` | No       | The `slotProps` member uses the `Partial<SlotProps<&#123; root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; empty: import("ink").TextProps; overflow: import("ink").TextProps; &#125;, &#123; readonly focused: boolean; readonly activeId?: string; readonly expanded: ReadonlySet<string>; &#125;>> \| undefined` contract. | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotProps`](/tuil/docs/reference/packages/theme/api/slot-props), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props)           |

## Source [#source]

[View the secondary source reference](https://github.com/mwillbanks/tuil/blob/main/registry/data-display/tree.tsx)