TreeView API

The content of the component.

Override or extend the styles applied to the component. See CSS API below for more details.

The default icon used to collapse the node.

The default icon displayed next to a end node. This is applied to all tree nodes and can be overridden by the TreeItem icon prop.

Expanded node ids. (Uncontrolled)

The default icon used to expand the node.

The default icon displayed next to a parent node. This is applied to all parent nodes and can be overridden by the TreeItem icon prop.

Selected node ids. (Uncontrolled) When multiSelect is true this takes an array of strings; when false (default) a string.

If true, will allow focus on disabled items.

If true selection is disabled.

Expanded node ids. (Controlled)

This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.

If true ctrl and shift will trigger multiselect.

Callback fired when tree items are focused.

Signature:
function(event: object, value: string) => void
event: The event source of the callback Warning: This is a generic event not a focus event.
value: of the focused node.

Callback fired when tree items are selected/unselected.

Signature:
function(event: object, value: array | string) => void
event: The event source of the callback
value: of the selected nodes. When multiSelect is true this is an array of strings; when false (default) a string.

Callback fired when tree items are expanded/collapsed.

Signature:
function(event: object, nodeIds: array) => void
event: The event source of the callback.
nodeIds: The ids of the expanded nodes.

Selected node ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string.

The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.