TreeView
TreeView(
__namedParameters):Element
Defined in: src/components/controls/TreeView/TreeView.tsx:36
A hierarchical collapsible tree for displaying and managing nested data.
Supports multi-selection, keyboard navigation, inline renaming, and custom node rendering. The most iconic editor panel — scene hierarchy, file browser, layer stack.
Parameters
Section titled “Parameters”__namedParameters
Section titled “__namedParameters”about?
Section titled “about?”string
accessKey?
Section titled “accessKey?”string
aria-activedescendant?
Section titled “aria-activedescendant?”string
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic?
Section titled “aria-atomic?”Booleanish
Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete?
Section titled “aria-autocomplete?”"none" | "inline" | "both" | "list"
Indicates whether inputting text could trigger display of one or more predictions of the user’s intended value for an input and specifies how predictions would be presented if they are made.
aria-braillelabel?
Section titled “aria-braillelabel?”string
Defines a string value that labels the current element, which is intended to be converted into Braille.
See
aria-label.
aria-brailleroledescription?
Section titled “aria-brailleroledescription?”string
Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
See
aria-roledescription.
aria-busy?
Section titled “aria-busy?”Booleanish
aria-checked?
Section titled “aria-checked?”boolean | "mixed" | "false" | "true"
Indicates the current “checked” state of checkboxes, radio buttons, and other widgets.
See
- aria-pressed
- aria-selected.
aria-colcount?
Section titled “aria-colcount?”number
Defines the total number of columns in a table, grid, or treegrid.
See
aria-colindex.
aria-colindex?
Section titled “aria-colindex?”number
Defines an element’s column index or position with respect to the total number of columns within a table, grid, or treegrid.
See
- aria-colcount
- aria-colspan.
aria-colindextext?
Section titled “aria-colindextext?”string
Defines a human readable text alternative of aria-colindex.
See
aria-rowindextext.
aria-colspan?
Section titled “aria-colspan?”number
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
See
- aria-colindex
- aria-rowspan.
aria-controls?
Section titled “aria-controls?”string
Identifies the element (or elements) whose contents or presence are controlled by the current element.
See
aria-owns.
aria-current?
Section titled “aria-current?”boolean | "location" | "page" | "false" | "true" | "step" | "date" | "time"
Indicates the element that represents the current item within a container or set of related elements.
aria-describedby?
Section titled “aria-describedby?”string
Identifies the element (or elements) that describes the object.
See
aria-labelledby
aria-description?
Section titled “aria-description?”string
Defines a string value that describes or annotates the current element.
See
related aria-describedby.
aria-details?
Section titled “aria-details?”string
Identifies the element that provides a detailed, extended description for the object.
See
aria-describedby.
aria-disabled?
Section titled “aria-disabled?”Booleanish
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
See
- aria-hidden
- aria-readonly.
aria-dropeffect?
Section titled “aria-dropeffect?”"none" | "link" | "copy" | "move" | "execute" | "popup"
Indicates what functions can be performed when a dragged object is released on the drop target.
aria-errormessage?
Section titled “aria-errormessage?”string
Identifies the element that provides an error message for the object.
See
- aria-invalid
- aria-describedby.
aria-expanded?
Section titled “aria-expanded?”Booleanish
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto?
Section titled “aria-flowto?”string
Identifies the next element (or elements) in an alternate reading order of content which, at the user’s discretion, allows assistive technology to override the general default of reading in document source order.
aria-grabbed?
Section titled “aria-grabbed?”Booleanish
Indicates an element’s “grabbed” state in a drag-and-drop operation.
aria-haspopup?
Section titled “aria-haspopup?”boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree"
Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hidden?
Section titled “aria-hidden?”Booleanish
Indicates whether the element is exposed to an accessibility API.
See
aria-disabled.
aria-invalid?
Section titled “aria-invalid?”boolean | "false" | "true" | "grammar" | "spelling"
Indicates the entered value does not conform to the format expected by the application.
See
aria-errormessage.
aria-keyshortcuts?
Section titled “aria-keyshortcuts?”string
Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label?
Section titled “aria-label?”string
Defines a string value that labels the current element.
See
aria-labelledby.
aria-labelledby?
Section titled “aria-labelledby?”string
Identifies the element (or elements) that labels the current element.
See
aria-describedby.
aria-level?
Section titled “aria-level?”number
Defines the hierarchical level of an element within a structure.
aria-live?
Section titled “aria-live?”"off" | "assertive" | "polite"
Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modal?
Section titled “aria-modal?”Booleanish
Indicates whether an element is modal when displayed.
aria-multiline?
Section titled “aria-multiline?”Booleanish
Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable?
Section titled “aria-multiselectable?”Booleanish
Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation?
Section titled “aria-orientation?”"horizontal" | "vertical"
Indicates whether the element’s orientation is horizontal, vertical, or unknown/ambiguous.
aria-owns?
Section titled “aria-owns?”string
Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
See
aria-controls.
aria-placeholder?
Section titled “aria-placeholder?”string
Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset?
Section titled “aria-posinset?”number
Defines an element’s number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
See
aria-setsize.
aria-pressed?
Section titled “aria-pressed?”boolean | "mixed" | "false" | "true"
Indicates the current “pressed” state of toggle buttons.
See
- aria-checked
- aria-selected.
aria-readonly?
Section titled “aria-readonly?”Booleanish
Indicates that the element is not editable, but is otherwise operable.
See
aria-disabled.
aria-relevant?
Section titled “aria-relevant?”"text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
See
aria-atomic.
aria-required?
Section titled “aria-required?”Booleanish
Indicates that user input is required on the element before a form may be submitted.
aria-roledescription?
Section titled “aria-roledescription?”string
Defines a human-readable, author-localized description for the role of an element.
aria-rowcount?
Section titled “aria-rowcount?”number
Defines the total number of rows in a table, grid, or treegrid.
See
aria-rowindex.
aria-rowindex?
Section titled “aria-rowindex?”number
Defines an element’s row index or position with respect to the total number of rows within a table, grid, or treegrid.
See
- aria-rowcount
- aria-rowspan.
aria-rowindextext?
Section titled “aria-rowindextext?”string
Defines a human readable text alternative of aria-rowindex.
See
aria-colindextext.
aria-rowspan?
Section titled “aria-rowspan?”number
Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
See
- aria-rowindex
- aria-colspan.
aria-selected?
Section titled “aria-selected?”Booleanish
Indicates the current “selected” state of various widgets.
See
- aria-checked
- aria-pressed.
aria-setsize?
Section titled “aria-setsize?”number
Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
See
aria-posinset.
aria-sort?
Section titled “aria-sort?”"none" | "ascending" | "descending" | "other"
Indicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemax?
Section titled “aria-valuemax?”number
Defines the maximum allowed value for a range widget.
aria-valuemin?
Section titled “aria-valuemin?”number
Defines the minimum allowed value for a range widget.
aria-valuenow?
Section titled “aria-valuenow?”number
Defines the current value for a range widget.
See
aria-valuetext.
aria-valuetext?
Section titled “aria-valuetext?”string
Defines the human readable text alternative of aria-valuenow for a range widget.
autoCapitalize?
Section titled “autoCapitalize?”"none" | string & object | "off" | "on" | "sentences" | "words" | "characters"
autoCorrect?
Section titled “autoCorrect?”string
autoFocus?
Section titled “autoFocus?”boolean
autoSave?
Section titled “autoSave?”string
children?
Section titled “children?”ReactNode
className?
Section titled “className?”string
Additional CSS class names
color?
Section titled “color?”string
content?
Section titled “content?”string
contentEditable?
Section titled “contentEditable?”"inherit" | Booleanish | "plaintext-only"
contextMenu?
Section titled “contextMenu?”string
dangerouslySetInnerHTML?
Section titled “dangerouslySetInnerHTML?”{ __html: string | TrustedHTML; }
dangerouslySetInnerHTML.__html
Section titled “dangerouslySetInnerHTML.__html”string | TrustedHTML
datatype?
Section titled “datatype?”string
defaultChecked?
Section titled “defaultChecked?”boolean
defaultExpandedIds?
Section titled “defaultExpandedIds?”string[]
Default expanded node IDs (uncontrolled).
defaultSelectedIds?
Section titled “defaultSelectedIds?”string[]
Default selected node IDs (uncontrolled).
defaultValue?
Section titled “defaultValue?”string | number | readonly string[]
string
draggable?
Section titled “draggable?”Booleanish
dropTargetId?
Section titled “dropTargetId?”string | null
Id of the node currently highlighted as an active drop target. The matching
row gets a data-drop-target="true" attribute and an accent highlight. Pair
with the onNodeDrag* / onNodeDrop callbacks to build drag-and-drop on top
of the tree (see FileTree). null/undefined means no active target.
emptyContent?
Section titled “emptyContent?”ReactNode
Empty state content when nodes array is empty.
enterKeyHint?
Section titled “enterKeyHint?”"search" | "next" | "enter" | "done" | "go" | "previous" | "send"
expandedIds?
Section titled “expandedIds?”string[]
Expanded node IDs (controlled).
expandOnClick?
Section titled “expandOnClick?”boolean = false
Whether clicking anywhere on a parent node’s row toggles its expansion (not just the chevron). Leaf nodes are unaffected.
Default
falseexpandOnSelect?
Section titled “expandOnSelect?”boolean = false
Whether to expand parent nodes when they are selected.
Default
falseexportparts?
Section titled “exportparts?”string
See
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts
hidden?
Section titled “hidden?”boolean
string
Unique identifier for the component
indent?
Section titled “indent?”number = 16
Indentation per depth level in pixels.
Default
16inert?
Section titled “inert?”boolean
See
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
inlist?
Section titled “inlist?”any
inputMode?
Section titled “inputMode?”"text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal"
Hints at the type of data that might be entered by the user while editing the element or its contents
See
https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
string
Specify that a standard HTML element should behave like a defined custom built-in element
See
https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
itemID?
Section titled “itemID?”string
itemProp?
Section titled “itemProp?”string
itemRef?
Section titled “itemRef?”string
itemScope?
Section titled “itemScope?”boolean
itemType?
Section titled “itemType?”string
string
maxHeight?
Section titled “maxHeight?”string | number
Maximum height before scrolling.
Tree data — array of root-level nodes.
nonce?
Section titled “nonce?”string
onAbort?
Section titled “onAbort?”ReactEventHandler<HTMLDivElement>
onAbortCapture?
Section titled “onAbortCapture?”ReactEventHandler<HTMLDivElement>
onAnimationEnd?
Section titled “onAnimationEnd?”AnimationEventHandler<HTMLDivElement>
onAnimationEndCapture?
Section titled “onAnimationEndCapture?”AnimationEventHandler<HTMLDivElement>
onAnimationIteration?
Section titled “onAnimationIteration?”AnimationEventHandler<HTMLDivElement>
onAnimationIterationCapture?
Section titled “onAnimationIterationCapture?”AnimationEventHandler<HTMLDivElement>
onAnimationStart?
Section titled “onAnimationStart?”AnimationEventHandler<HTMLDivElement>
onAnimationStartCapture?
Section titled “onAnimationStartCapture?”AnimationEventHandler<HTMLDivElement>
onAuxClick?
Section titled “onAuxClick?”MouseEventHandler<HTMLDivElement>
onAuxClickCapture?
Section titled “onAuxClickCapture?”MouseEventHandler<HTMLDivElement>
onBeforeInput?
Section titled “onBeforeInput?”InputEventHandler<HTMLDivElement>
onBeforeInputCapture?
Section titled “onBeforeInputCapture?”InputEventHandler<HTMLDivElement>
onBeforeToggle?
Section titled “onBeforeToggle?”ToggleEventHandler<HTMLDivElement>
onBlur?
Section titled “onBlur?”FocusEventHandler<HTMLDivElement>
onBlurCapture?
Section titled “onBlurCapture?”FocusEventHandler<HTMLDivElement>
onCanPlay?
Section titled “onCanPlay?”ReactEventHandler<HTMLDivElement>
onCanPlayCapture?
Section titled “onCanPlayCapture?”ReactEventHandler<HTMLDivElement>
onCanPlayThrough?
Section titled “onCanPlayThrough?”ReactEventHandler<HTMLDivElement>
onCanPlayThroughCapture?
Section titled “onCanPlayThroughCapture?”ReactEventHandler<HTMLDivElement>
onChangeCapture?
Section titled “onChangeCapture?”ChangeEventHandler<HTMLDivElement, Element>
onClick?
Section titled “onClick?”MouseEventHandler<HTMLDivElement>
onClickCapture?
Section titled “onClickCapture?”MouseEventHandler<HTMLDivElement>
onCompositionEnd?
Section titled “onCompositionEnd?”CompositionEventHandler<HTMLDivElement>
onCompositionEndCapture?
Section titled “onCompositionEndCapture?”CompositionEventHandler<HTMLDivElement>
onCompositionStart?
Section titled “onCompositionStart?”CompositionEventHandler<HTMLDivElement>
onCompositionStartCapture?
Section titled “onCompositionStartCapture?”CompositionEventHandler<HTMLDivElement>
onCompositionUpdate?
Section titled “onCompositionUpdate?”CompositionEventHandler<HTMLDivElement>
onCompositionUpdateCapture?
Section titled “onCompositionUpdateCapture?”CompositionEventHandler<HTMLDivElement>
onContextMenu?
Section titled “onContextMenu?”MouseEventHandler<HTMLDivElement>
onContextMenuCapture?
Section titled “onContextMenuCapture?”MouseEventHandler<HTMLDivElement>
onCopy?
Section titled “onCopy?”ClipboardEventHandler<HTMLDivElement>
onCopyCapture?
Section titled “onCopyCapture?”ClipboardEventHandler<HTMLDivElement>
onCut?
Section titled “onCut?”ClipboardEventHandler<HTMLDivElement>
onCutCapture?
Section titled “onCutCapture?”ClipboardEventHandler<HTMLDivElement>
onDoubleClick?
Section titled “onDoubleClick?”MouseEventHandler<HTMLDivElement>
onDoubleClickCapture?
Section titled “onDoubleClickCapture?”MouseEventHandler<HTMLDivElement>
onDrag?
Section titled “onDrag?”DragEventHandler<HTMLDivElement>
onDragCapture?
Section titled “onDragCapture?”DragEventHandler<HTMLDivElement>
onDragEnd?
Section titled “onDragEnd?”DragEventHandler<HTMLDivElement>
onDragEndCapture?
Section titled “onDragEndCapture?”DragEventHandler<HTMLDivElement>
onDragEnter?
Section titled “onDragEnter?”DragEventHandler<HTMLDivElement>
onDragEnterCapture?
Section titled “onDragEnterCapture?”DragEventHandler<HTMLDivElement>
onDragExit?
Section titled “onDragExit?”DragEventHandler<HTMLDivElement>
onDragExitCapture?
Section titled “onDragExitCapture?”DragEventHandler<HTMLDivElement>
onDragLeave?
Section titled “onDragLeave?”DragEventHandler<HTMLDivElement>
onDragLeaveCapture?
Section titled “onDragLeaveCapture?”DragEventHandler<HTMLDivElement>
onDragOver?
Section titled “onDragOver?”DragEventHandler<HTMLDivElement>
onDragOverCapture?
Section titled “onDragOverCapture?”DragEventHandler<HTMLDivElement>
onDragStart?
Section titled “onDragStart?”DragEventHandler<HTMLDivElement>
onDragStartCapture?
Section titled “onDragStartCapture?”DragEventHandler<HTMLDivElement>
onDrop?
Section titled “onDrop?”DragEventHandler<HTMLDivElement>
onDropCapture?
Section titled “onDropCapture?”DragEventHandler<HTMLDivElement>
onDurationChange?
Section titled “onDurationChange?”ReactEventHandler<HTMLDivElement>
onDurationChangeCapture?
Section titled “onDurationChangeCapture?”ReactEventHandler<HTMLDivElement>
onEmptied?
Section titled “onEmptied?”ReactEventHandler<HTMLDivElement>
onEmptiedCapture?
Section titled “onEmptiedCapture?”ReactEventHandler<HTMLDivElement>
onEncrypted?
Section titled “onEncrypted?”ReactEventHandler<HTMLDivElement>
onEncryptedCapture?
Section titled “onEncryptedCapture?”ReactEventHandler<HTMLDivElement>
onEnded?
Section titled “onEnded?”ReactEventHandler<HTMLDivElement>
onEndedCapture?
Section titled “onEndedCapture?”ReactEventHandler<HTMLDivElement>
onError?
Section titled “onError?”ReactEventHandler<HTMLDivElement>
onErrorCapture?
Section titled “onErrorCapture?”ReactEventHandler<HTMLDivElement>
onExpandedChange?
Section titled “onExpandedChange?”(expandedIds) => void
Fired when expanded nodes change.
onFocus?
Section titled “onFocus?”FocusEventHandler<HTMLDivElement>
onFocusCapture?
Section titled “onFocusCapture?”FocusEventHandler<HTMLDivElement>
onGotPointerCapture?
Section titled “onGotPointerCapture?”PointerEventHandler<HTMLDivElement>
onGotPointerCaptureCapture?
Section titled “onGotPointerCaptureCapture?”PointerEventHandler<HTMLDivElement>
onInput?
Section titled “onInput?”InputEventHandler<HTMLDivElement>
onInputCapture?
Section titled “onInputCapture?”InputEventHandler<HTMLDivElement>
onInvalid?
Section titled “onInvalid?”ReactEventHandler<HTMLDivElement>
onInvalidCapture?
Section titled “onInvalidCapture?”ReactEventHandler<HTMLDivElement>
onKeyDown?
Section titled “onKeyDown?”KeyboardEventHandler<HTMLDivElement>
onKeyDownCapture?
Section titled “onKeyDownCapture?”KeyboardEventHandler<HTMLDivElement>
onKeyPress?
Section titled “onKeyPress?”KeyboardEventHandler<HTMLDivElement>
onKeyPressCapture?
Section titled “onKeyPressCapture?”KeyboardEventHandler<HTMLDivElement>
onKeyUp?
Section titled “onKeyUp?”KeyboardEventHandler<HTMLDivElement>
onKeyUpCapture?
Section titled “onKeyUpCapture?”KeyboardEventHandler<HTMLDivElement>
onLoad?
Section titled “onLoad?”ReactEventHandler<HTMLDivElement>
onLoadCapture?
Section titled “onLoadCapture?”ReactEventHandler<HTMLDivElement>
onLoadedData?
Section titled “onLoadedData?”ReactEventHandler<HTMLDivElement>
onLoadedDataCapture?
Section titled “onLoadedDataCapture?”ReactEventHandler<HTMLDivElement>
onLoadedMetadata?
Section titled “onLoadedMetadata?”ReactEventHandler<HTMLDivElement>
onLoadedMetadataCapture?
Section titled “onLoadedMetadataCapture?”ReactEventHandler<HTMLDivElement>
onLoadStart?
Section titled “onLoadStart?”ReactEventHandler<HTMLDivElement>
onLoadStartCapture?
Section titled “onLoadStartCapture?”ReactEventHandler<HTMLDivElement>
onLostPointerCapture?
Section titled “onLostPointerCapture?”PointerEventHandler<HTMLDivElement>
onLostPointerCaptureCapture?
Section titled “onLostPointerCaptureCapture?”PointerEventHandler<HTMLDivElement>
onMouseDown?
Section titled “onMouseDown?”MouseEventHandler<HTMLDivElement>
onMouseDownCapture?
Section titled “onMouseDownCapture?”MouseEventHandler<HTMLDivElement>
onMouseEnter?
Section titled “onMouseEnter?”MouseEventHandler<HTMLDivElement>
onMouseLeave?
Section titled “onMouseLeave?”MouseEventHandler<HTMLDivElement>
onMouseMove?
Section titled “onMouseMove?”MouseEventHandler<HTMLDivElement>
onMouseMoveCapture?
Section titled “onMouseMoveCapture?”MouseEventHandler<HTMLDivElement>
onMouseOut?
Section titled “onMouseOut?”MouseEventHandler<HTMLDivElement>
onMouseOutCapture?
Section titled “onMouseOutCapture?”MouseEventHandler<HTMLDivElement>
onMouseOver?
Section titled “onMouseOver?”MouseEventHandler<HTMLDivElement>
onMouseOverCapture?
Section titled “onMouseOverCapture?”MouseEventHandler<HTMLDivElement>
onMouseUp?
Section titled “onMouseUp?”MouseEventHandler<HTMLDivElement>
onMouseUpCapture?
Section titled “onMouseUpCapture?”MouseEventHandler<HTMLDivElement>
onNodeClick?
Section titled “onNodeClick?”(node, event) => void
Fired when a node is clicked.
onNodeContextMenu?
Section titled “onNodeContextMenu?”(node, event) => void
Fired when a node is right-clicked.
onNodeDoubleClick?
Section titled “onNodeDoubleClick?”(node, event) => void
Fired when a node is double-clicked.
onNodeDragLeave?
Section titled “onNodeDragLeave?”(node, event) => void
Fired on dragleave from a node row.
onNodeDragOver?
Section titled “onNodeDragOver?”(node, event) => void
Fired on dragover over a node row. Call event.preventDefault() to mark
the row as a valid drop target (so a subsequent drop fires).
onNodeDrop?
Section titled “onNodeDrop?”(node, event) => void
Fired on drop onto a node row.
onNodeRename?
Section titled “onNodeRename?”(nodeId, newLabel) => void
Fired when a node is renamed.
onPaste?
Section titled “onPaste?”ClipboardEventHandler<HTMLDivElement>
onPasteCapture?
Section titled “onPasteCapture?”ClipboardEventHandler<HTMLDivElement>
onPause?
Section titled “onPause?”ReactEventHandler<HTMLDivElement>
onPauseCapture?
Section titled “onPauseCapture?”ReactEventHandler<HTMLDivElement>
onPlay?
Section titled “onPlay?”ReactEventHandler<HTMLDivElement>
onPlayCapture?
Section titled “onPlayCapture?”ReactEventHandler<HTMLDivElement>
onPlaying?
Section titled “onPlaying?”ReactEventHandler<HTMLDivElement>
onPlayingCapture?
Section titled “onPlayingCapture?”ReactEventHandler<HTMLDivElement>
onPointerCancel?
Section titled “onPointerCancel?”PointerEventHandler<HTMLDivElement>
onPointerCancelCapture?
Section titled “onPointerCancelCapture?”PointerEventHandler<HTMLDivElement>
onPointerDown?
Section titled “onPointerDown?”PointerEventHandler<HTMLDivElement>
onPointerDownCapture?
Section titled “onPointerDownCapture?”PointerEventHandler<HTMLDivElement>
onPointerEnter?
Section titled “onPointerEnter?”PointerEventHandler<HTMLDivElement>
onPointerLeave?
Section titled “onPointerLeave?”PointerEventHandler<HTMLDivElement>
onPointerMove?
Section titled “onPointerMove?”PointerEventHandler<HTMLDivElement>
onPointerMoveCapture?
Section titled “onPointerMoveCapture?”PointerEventHandler<HTMLDivElement>
onPointerOut?
Section titled “onPointerOut?”PointerEventHandler<HTMLDivElement>
onPointerOutCapture?
Section titled “onPointerOutCapture?”PointerEventHandler<HTMLDivElement>
onPointerOver?
Section titled “onPointerOver?”PointerEventHandler<HTMLDivElement>
onPointerOverCapture?
Section titled “onPointerOverCapture?”PointerEventHandler<HTMLDivElement>
onPointerUp?
Section titled “onPointerUp?”PointerEventHandler<HTMLDivElement>
onPointerUpCapture?
Section titled “onPointerUpCapture?”PointerEventHandler<HTMLDivElement>
onProgress?
Section titled “onProgress?”ReactEventHandler<HTMLDivElement>
onProgressCapture?
Section titled “onProgressCapture?”ReactEventHandler<HTMLDivElement>
onRateChange?
Section titled “onRateChange?”ReactEventHandler<HTMLDivElement>
onRateChangeCapture?
Section titled “onRateChangeCapture?”ReactEventHandler<HTMLDivElement>
onReset?
Section titled “onReset?”ReactEventHandler<HTMLDivElement>
onResetCapture?
Section titled “onResetCapture?”ReactEventHandler<HTMLDivElement>
onScroll?
Section titled “onScroll?”UIEventHandler<HTMLDivElement>
onScrollCapture?
Section titled “onScrollCapture?”UIEventHandler<HTMLDivElement>
onScrollEnd?
Section titled “onScrollEnd?”UIEventHandler<HTMLDivElement>
onScrollEndCapture?
Section titled “onScrollEndCapture?”UIEventHandler<HTMLDivElement>
onSeeked?
Section titled “onSeeked?”ReactEventHandler<HTMLDivElement>
onSeekedCapture?
Section titled “onSeekedCapture?”ReactEventHandler<HTMLDivElement>
onSeeking?
Section titled “onSeeking?”ReactEventHandler<HTMLDivElement>
onSeekingCapture?
Section titled “onSeekingCapture?”ReactEventHandler<HTMLDivElement>
onSelect?
Section titled “onSelect?”ReactEventHandler<HTMLDivElement>
onSelectCapture?
Section titled “onSelectCapture?”ReactEventHandler<HTMLDivElement>
onSelectionChange?
Section titled “onSelectionChange?”(selectedIds) => void
Fired when selected nodes change.
onStalled?
Section titled “onStalled?”ReactEventHandler<HTMLDivElement>
onStalledCapture?
Section titled “onStalledCapture?”ReactEventHandler<HTMLDivElement>
onSubmit?
Section titled “onSubmit?”SubmitEventHandler<HTMLDivElement>
onSubmitCapture?
Section titled “onSubmitCapture?”SubmitEventHandler<HTMLDivElement>
onSuspend?
Section titled “onSuspend?”ReactEventHandler<HTMLDivElement>
onSuspendCapture?
Section titled “onSuspendCapture?”ReactEventHandler<HTMLDivElement>
onTimeUpdate?
Section titled “onTimeUpdate?”ReactEventHandler<HTMLDivElement>
onTimeUpdateCapture?
Section titled “onTimeUpdateCapture?”ReactEventHandler<HTMLDivElement>
onToggle?
Section titled “onToggle?”ToggleEventHandler<HTMLDivElement>
onTouchCancel?
Section titled “onTouchCancel?”TouchEventHandler<HTMLDivElement>
onTouchCancelCapture?
Section titled “onTouchCancelCapture?”TouchEventHandler<HTMLDivElement>
onTouchEnd?
Section titled “onTouchEnd?”TouchEventHandler<HTMLDivElement>
onTouchEndCapture?
Section titled “onTouchEndCapture?”TouchEventHandler<HTMLDivElement>
onTouchMove?
Section titled “onTouchMove?”TouchEventHandler<HTMLDivElement>
onTouchMoveCapture?
Section titled “onTouchMoveCapture?”TouchEventHandler<HTMLDivElement>
onTouchStart?
Section titled “onTouchStart?”TouchEventHandler<HTMLDivElement>
onTouchStartCapture?
Section titled “onTouchStartCapture?”TouchEventHandler<HTMLDivElement>
onTransitionCancel?
Section titled “onTransitionCancel?”TransitionEventHandler<HTMLDivElement>
onTransitionCancelCapture?
Section titled “onTransitionCancelCapture?”TransitionEventHandler<HTMLDivElement>
onTransitionEnd?
Section titled “onTransitionEnd?”TransitionEventHandler<HTMLDivElement>
onTransitionEndCapture?
Section titled “onTransitionEndCapture?”TransitionEventHandler<HTMLDivElement>
onTransitionRun?
Section titled “onTransitionRun?”TransitionEventHandler<HTMLDivElement>
onTransitionRunCapture?
Section titled “onTransitionRunCapture?”TransitionEventHandler<HTMLDivElement>
onTransitionStart?
Section titled “onTransitionStart?”TransitionEventHandler<HTMLDivElement>
onTransitionStartCapture?
Section titled “onTransitionStartCapture?”TransitionEventHandler<HTMLDivElement>
onVolumeChange?
Section titled “onVolumeChange?”ReactEventHandler<HTMLDivElement>
onVolumeChangeCapture?
Section titled “onVolumeChangeCapture?”ReactEventHandler<HTMLDivElement>
onWaiting?
Section titled “onWaiting?”ReactEventHandler<HTMLDivElement>
onWaitingCapture?
Section titled “onWaitingCapture?”ReactEventHandler<HTMLDivElement>
onWheel?
Section titled “onWheel?”WheelEventHandler<HTMLDivElement>
onWheelCapture?
Section titled “onWheelCapture?”WheelEventHandler<HTMLDivElement>
string
See
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part
popover?
Section titled “popover?”"" | "auto" | "manual" | "hint"
popoverTarget?
Section titled “popoverTarget?”string
popoverTargetAction?
Section titled “popoverTargetAction?”"toggle" | "hide" | "show"
prefix?
Section titled “prefix?”string
property?
Section titled “property?”string
radioGroup?
Section titled “radioGroup?”string
Ref<HTMLDivElement>
string
renamable?
Section titled “renamable?”boolean = false
Whether to allow inline renaming (double-click on label).
Default
falserenderActions?
Section titled “renderActions?”(node, state) => ReactNode
Custom render function for trailing actions (right side of node).
renderNode?
Section titled “renderNode?”(node, state) => ReactNode
Custom render function for node content.
resource?
Section titled “resource?”string
results?
Section titled “results?”number
string
AriaRole
security?
Section titled “security?”string
selectedIds?
Section titled “selectedIds?”string[]
Selected node IDs (controlled).
selectionMode?
Section titled “selectionMode?”TreeSelectionMode = 'single'
Selection mode.
Default
"single"showChevrons?
Section titled “showChevrons?”boolean = true
Whether to show expand/collapse chevrons for parent nodes.
Default
trueshowGuideLines?
Section titled “showGuideLines?”boolean = false
Whether to show connecting guide lines.
Default
falseSize = 'md'
Tree node size.
Default
"md"string
spellCheck?
Section titled “spellCheck?”Booleanish
style?
Section titled “style?”CSSProperties
Custom inline styles
suppressContentEditableWarning?
Section titled “suppressContentEditableWarning?”boolean
suppressHydrationWarning?
Section titled “suppressHydrationWarning?”boolean
tabIndex?
Section titled “tabIndex?”number
testId?
Section titled “testId?”string
Test identifier for automated testing
title?
Section titled “title?”string
translate?
Section titled “translate?”"yes" | "no"
typeof?
Section titled “typeof?”string
unselectable?
Section titled “unselectable?”"off" | "on"
vocab?
Section titled “vocab?”string
Returns
Section titled “Returns”Element
Example
Section titled “Example”const nodes = [ { id: '1', label: 'Root', children: [ { id: '1.1', label: 'Child A' }, { id: '1.2', label: 'Child B' }, ]},];<TreeView nodes={nodes} onSelectionChange={setSelected} />