• Public
  • Public/Protected
  • All

Interface TreeProps<T>

Type parameters






about?: string
accessKey?: string
aria-activedescendant?: string

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

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?: "list" | "none" | "inline" | "both"

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-busy?: Booleanish

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

aria-checked?: boolean | "true" | "false" | "mixed"

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.


aria-pressed @see aria-selected.

aria-colcount?: number

Defines the total number of columns in a table, grid, or treegrid.



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.


aria-colcount @see aria-colspan.

aria-colspan?: number

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.


aria-colindex @see aria-rowspan.

aria-controls?: string

Identifies the element (or elements) whose contents or presence are controlled by the current element.



aria-current?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"

Indicates the element that represents the current item within a container or set of related elements.

aria-describedby?: string

Identifies the element (or elements) that describes the object.



aria-details?: string

Identifies the element that provides a detailed, extended description for the object.



aria-disabled?: Booleanish

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.


aria-hidden @see aria-readonly.

aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup"

Indicates what functions can be performed when a dragged object is released on the drop target.


in ARIA 1.1

aria-errormessage?: string

Identifies the element that provides an error message for the object.


aria-invalid @see aria-describedby.

aria-expanded?: Booleanish

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

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?: Booleanish

Indicates an element's "grabbed" state in a drag-and-drop operation.


in ARIA 1.1

aria-haspopup?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

aria-hidden?: Booleanish

Indicates whether the element is exposed to an accessibility API.



aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"

Indicates the entered value does not conform to the format expected by the application.



aria-keyshortcuts?: string

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

aria-label?: string

An optional label string that describes this tree. Either this or the aria-labelledby prop are required for a11y.

aria-labelledby?: string

An optional id that points to an element that labels this tree. Either this or the aria-label prop are required for a11y.

aria-level?: number

Defines the hierarchical level of an element within a structure.

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?: Booleanish

Indicates whether an element is modal when displayed.

aria-multiline?: Booleanish

Indicates whether a text box accepts multiple lines of input or only a single line.

aria-multiselectable?: Booleanish

Indicates that the user may select more than one item from the current selectable descendants.

aria-orientation?: "horizontal" | "vertical"

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

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.



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?: 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.



aria-pressed?: boolean | "true" | "false" | "mixed"

Indicates the current "pressed" state of toggle buttons.


aria-checked @see aria-selected.

aria-readonly?: Booleanish

Indicates that the element is not editable, but is otherwise operable.



aria-relevant?: "text" | "additions" | "additions removals" | "additions text" | "all" | "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.



aria-required?: Booleanish

Indicates that user input is required on the element before a form may be submitted.

aria-roledescription?: string

Defines a human-readable, author-localized description for the role of an element.

aria-rowcount?: number

Defines the total number of rows in a table, grid, or treegrid.



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.


aria-rowcount @see aria-rowspan.

aria-rowspan?: number

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.


aria-rowindex @see aria-colspan.

aria-selected?: Booleanish

Indicates the current "selected" state of various widgets.


aria-checked @see aria-pressed.

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.



aria-sort?: "none" | "ascending" | "descending" | "other"

Indicates if items in a table or grid are sorted in ascending or descending order.

aria-valuemax?: number

Defines the maximum allowed value for a range widget.

aria-valuemin?: number

Defines the minimum allowed value for a range widget.

aria-valuenow?: number

Defines the current value for a range widget.



aria-valuetext?: string

Defines the human readable text alternative of aria-valuenow for a range widget.

autoCapitalize?: string
autoCorrect?: string
autoSave?: string
children?: ReactNode
className?: string
color?: string
contentEditable?: Booleanish | "inherit"
contextMenu?: string
dangerouslySetInnerHTML?: { __html: string }

Type declaration

  • __html: string
data: TreeData<T>

The data to render within the tree.

datatype?: string
defaultChecked?: boolean
defaultValue?: string | number | readonly string[]
dense?: boolean

Boolean if the dense spec should be applied to the list.

dir?: string
draggable?: Booleanish
expandedIds: ExpandedIds

The list of expanded ids within the tree. These ids should reference itemIds for tree items.

expanderIcon?: ReactNode

The icon to show within each item within the tree that helps show that there are child items.

NOTE: This will override the rightAddon prop if defined on each item by default so they can't be used. If the expanderLeft prop is enabled, the leftAddon will be overridden instead.

expanderLeft?: boolean

Boolean if the expander icon should appear to the left instead of the right.

getItemProps?: GetItemProps<T>


hidden?: boolean
horizontal?: boolean

Boolean if the list should appear horizontally instead of vertically.

id: string

The id for the tree element. This is required for a lot of accessibility features.

inlist?: any
inputMode?: "none" | "search" | "text" | "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



is?: string

Specify that a standard HTML element should behave like a defined custom built-in element



itemID?: string
itemProp?: string
itemRef?: string
itemRenderer?: TreeItemRenderer<T>

A function that gets called to render each TreeItem within the tree. This can be overridden if you need to add additional functionality around the TreeItem (such as drag and drop). The default behavior is to extract the ListItem props:

  • leftAddon
  • leftAddonType
  • leftAddonPosition
  • rightAddon
  • rightAddonType
  • rightAddonPosition
  • children
  • to / href
  • isLink

and try to render as a TreeItem with those props. It will also override the expanderLeft and expanderIcon on the TreeItem with whatever was provided to the Tree component.

itemScope?: boolean
itemType?: string
labelKey?: string

The key to use to extract a renderable label from each tree item. This will be displayed in the DOM as the children in each tree item.

lang?: string
linkComponent?: ElementType<any>

The component to use for any treeitem that has a to, href, or isLink attribute. This is a nice way to be able to update treeitems to be links instead of storing the contentComponent in the tree's data.

multiSelect?: boolean

Boolean if multiple items within the tree can be selected at once.

onAbort?: ReactEventHandler<ListElement>
onAbortCapture?: ReactEventHandler<ListElement>
onAnimationEnd?: AnimationEventHandler<ListElement>
onAnimationEndCapture?: AnimationEventHandler<ListElement>
onAnimationIteration?: AnimationEventHandler<ListElement>
onAnimationIterationCapture?: AnimationEventHandler<ListElement>
onAnimationStart?: AnimationEventHandler<ListElement>
onAnimationStartCapture?: AnimationEventHandler<ListElement>
onAuxClick?: MouseEventHandler<ListElement>
onAuxClickCapture?: MouseEventHandler<ListElement>
onBeforeInput?: FormEventHandler<ListElement>
onBeforeInputCapture?: FormEventHandler<ListElement>
onBlur?: FocusEventHandler<ListElement>
onBlurCapture?: FocusEventHandler<ListElement>
onCanPlay?: ReactEventHandler<ListElement>
onCanPlayCapture?: ReactEventHandler<ListElement>
onCanPlayThrough?: ReactEventHandler<ListElement>
onCanPlayThroughCapture?: ReactEventHandler<ListElement>
onChange?: FormEventHandler<ListElement>
onChangeCapture?: FormEventHandler<ListElement>
onClick?: MouseEventHandler<ListElement>
onClickCapture?: MouseEventHandler<ListElement>
onCompositionEnd?: CompositionEventHandler<ListElement>
onCompositionEndCapture?: CompositionEventHandler<ListElement>
onCompositionStart?: CompositionEventHandler<ListElement>
onCompositionStartCapture?: CompositionEventHandler<ListElement>
onCompositionUpdate?: CompositionEventHandler<ListElement>
onCompositionUpdateCapture?: CompositionEventHandler<ListElement>
onContextMenu?: MouseEventHandler<ListElement>
onContextMenuCapture?: MouseEventHandler<ListElement>
onCopy?: ClipboardEventHandler<ListElement>
onCopyCapture?: ClipboardEventHandler<ListElement>
onCut?: ClipboardEventHandler<ListElement>
onCutCapture?: ClipboardEventHandler<ListElement>
onDoubleClick?: MouseEventHandler<ListElement>
onDoubleClickCapture?: MouseEventHandler<ListElement>
onDrag?: DragEventHandler<ListElement>
onDragCapture?: DragEventHandler<ListElement>
onDragEnd?: DragEventHandler<ListElement>
onDragEndCapture?: DragEventHandler<ListElement>
onDragEnter?: DragEventHandler<ListElement>
onDragEnterCapture?: DragEventHandler<ListElement>
onDragExit?: DragEventHandler<ListElement>
onDragExitCapture?: DragEventHandler<ListElement>
onDragLeave?: DragEventHandler<ListElement>
onDragLeaveCapture?: DragEventHandler<ListElement>
onDragOver?: DragEventHandler<ListElement>
onDragOverCapture?: DragEventHandler<ListElement>
onDragStart?: DragEventHandler<ListElement>
onDragStartCapture?: DragEventHandler<ListElement>
onDrop?: DragEventHandler<ListElement>
onDropCapture?: DragEventHandler<ListElement>
onDurationChange?: ReactEventHandler<ListElement>
onDurationChangeCapture?: ReactEventHandler<ListElement>
onEmptied?: ReactEventHandler<ListElement>
onEmptiedCapture?: ReactEventHandler<ListElement>
onEncrypted?: ReactEventHandler<ListElement>
onEncryptedCapture?: ReactEventHandler<ListElement>
onEnded?: ReactEventHandler<ListElement>
onEndedCapture?: ReactEventHandler<ListElement>
onError?: ReactEventHandler<ListElement>
onErrorCapture?: ReactEventHandler<ListElement>
onFocus?: FocusEventHandler<ListElement>
onFocusCapture?: FocusEventHandler<ListElement>
onGotPointerCapture?: PointerEventHandler<ListElement>
onGotPointerCaptureCapture?: PointerEventHandler<ListElement>
onInput?: FormEventHandler<ListElement>
onInputCapture?: FormEventHandler<ListElement>
onInvalid?: FormEventHandler<ListElement>
onInvalidCapture?: FormEventHandler<ListElement>
onKeyDown?: KeyboardEventHandler<ListElement>
onKeyDownCapture?: KeyboardEventHandler<ListElement>
onKeyPress?: KeyboardEventHandler<ListElement>
onKeyPressCapture?: KeyboardEventHandler<ListElement>
onKeyUp?: KeyboardEventHandler<ListElement>
onKeyUpCapture?: KeyboardEventHandler<ListElement>
onLoad?: ReactEventHandler<ListElement>
onLoadCapture?: ReactEventHandler<ListElement>
onLoadStart?: ReactEventHandler<ListElement>
onLoadStartCapture?: ReactEventHandler<ListElement>
onLoadedData?: ReactEventHandler<ListElement>
onLoadedDataCapture?: ReactEventHandler<ListElement>
onLoadedMetadata?: ReactEventHandler<ListElement>
onLoadedMetadataCapture?: ReactEventHandler<ListElement>
onLostPointerCapture?: PointerEventHandler<ListElement>
onLostPointerCaptureCapture?: PointerEventHandler<ListElement>
onMouseDown?: MouseEventHandler<ListElement>
onMouseDownCapture?: MouseEventHandler<ListElement>
onMouseEnter?: MouseEventHandler<ListElement>
onMouseLeave?: MouseEventHandler<ListElement>
onMouseMove?: MouseEventHandler<ListElement>
onMouseMoveCapture?: MouseEventHandler<ListElement>
onMouseOut?: MouseEventHandler<ListElement>
onMouseOutCapture?: MouseEventHandler<ListElement>
onMouseOver?: MouseEventHandler<ListElement>
onMouseOverCapture?: MouseEventHandler<ListElement>
onMouseUp?: MouseEventHandler<ListElement>
onMouseUpCapture?: MouseEventHandler<ListElement>
onMultiItemExpansion: Dispatch<SetStateAction<ExpandedIds>>

A function to call when the user presses the asterisk key (*) that will expand all tree items at the same level as the currently focused item.


@since 4.0.1 Allows for callback behavior to get current expandedIds.

onPaste?: ClipboardEventHandler<ListElement>
onPasteCapture?: ClipboardEventHandler<ListElement>
onPause?: ReactEventHandler<ListElement>
onPauseCapture?: ReactEventHandler<ListElement>
onPlay?: ReactEventHandler<ListElement>
onPlayCapture?: ReactEventHandler<ListElement>
onPlaying?: ReactEventHandler<ListElement>
onPlayingCapture?: ReactEventHandler<ListElement>
onPointerCancel?: PointerEventHandler<ListElement>
onPointerCancelCapture?: PointerEventHandler<ListElement>
onPointerDown?: PointerEventHandler<ListElement>
onPointerDownCapture?: PointerEventHandler<ListElement>
onPointerEnter?: PointerEventHandler<ListElement>
onPointerEnterCapture?: PointerEventHandler<ListElement>
onPointerLeave?: PointerEventHandler<ListElement>
onPointerLeaveCapture?: PointerEventHandler<ListElement>
onPointerMove?: PointerEventHandler<ListElement>
onPointerMoveCapture?: PointerEventHandler<ListElement>
onPointerOut?: PointerEventHandler<ListElement>
onPointerOutCapture?: PointerEventHandler<ListElement>
onPointerOver?: PointerEventHandler<ListElement>
onPointerOverCapture?: PointerEventHandler<ListElement>
onPointerUp?: PointerEventHandler<ListElement>
onPointerUpCapture?: PointerEventHandler<ListElement>
onProgress?: ReactEventHandler<ListElement>
onProgressCapture?: ReactEventHandler<ListElement>
onRateChange?: ReactEventHandler<ListElement>
onRateChangeCapture?: ReactEventHandler<ListElement>
onReset?: FormEventHandler<ListElement>
onResetCapture?: FormEventHandler<ListElement>
onScroll?: UIEventHandler<ListElement>
onScrollCapture?: UIEventHandler<ListElement>
onSeeked?: ReactEventHandler<ListElement>
onSeekedCapture?: ReactEventHandler<ListElement>
onSeeking?: ReactEventHandler<ListElement>
onSeekingCapture?: ReactEventHandler<ListElement>
onSelect?: ReactEventHandler<ListElement>
onSelectCapture?: ReactEventHandler<ListElement>
onStalled?: ReactEventHandler<ListElement>
onStalledCapture?: ReactEventHandler<ListElement>
onSubmit?: FormEventHandler<ListElement>
onSubmitCapture?: FormEventHandler<ListElement>
onSuspend?: ReactEventHandler<ListElement>
onSuspendCapture?: ReactEventHandler<ListElement>
onTimeUpdate?: ReactEventHandler<ListElement>
onTimeUpdateCapture?: ReactEventHandler<ListElement>
onTouchCancel?: TouchEventHandler<ListElement>
onTouchCancelCapture?: TouchEventHandler<ListElement>
onTouchEnd?: TouchEventHandler<ListElement>
onTouchEndCapture?: TouchEventHandler<ListElement>
onTouchMove?: TouchEventHandler<ListElement>
onTouchMoveCapture?: TouchEventHandler<ListElement>
onTouchStart?: TouchEventHandler<ListElement>
onTouchStartCapture?: TouchEventHandler<ListElement>
onTransitionEnd?: TransitionEventHandler<ListElement>
onTransitionEndCapture?: TransitionEventHandler<ListElement>
onVolumeChange?: ReactEventHandler<ListElement>
onVolumeChangeCapture?: ReactEventHandler<ListElement>
onWaiting?: ReactEventHandler<ListElement>
onWaitingCapture?: ReactEventHandler<ListElement>
onWheel?: WheelEventHandler<ListElement>
onWheelCapture?: WheelEventHandler<ListElement>
ordered?: boolean

Boolean if the list's order is important. This will update the list to be rendered as an <ol> instead of <ul>.

placeholder?: string
prefix?: string
property?: string
radioGroup?: string
resource?: string
results?: number
role?: AriaRole

The role is set to "none" by default for lists screen readers announce lists differently than other elements on the page. Since the major use-case for lists is to contain clickable items, setting this to "none" fixes this issue.

rootId?: null | string

An optional id to use to determine the root items within the tree. You'll most likely want to keep this as the default of null, but it can also be used if you have a different identifier for root items.

security?: string
selectedIds: SelectedIds

The list of selected ids within the tree. If you only want to allow a single item to be selected at a time within a tree, keep this as either an empty list (no selections) or a single itemId.

slot?: string
sort?: TreeItemSorter<T>


spellCheck?: Booleanish
style?: CSSProperties
suppressContentEditableWarning?: boolean
suppressHydrationWarning?: boolean
tabIndex?: number
title?: string
translate?: "yes" | "no"
typeof?: string
unselectable?: "on" | "off"
valueKey?: string

The key to use to extract a text string from each tree item. This is used for keyboard accessibility and being able to "search" the tree for items starting with the typed letters.

vocab?: string


  • getItemLabel(item: T, labelKey: string): ReactNode
  • A function to extract the renderable label from each tree item. The default behavior will be to just return item[labelKey].


    • item: T
    • labelKey: string

    Returns ReactNode

  • getItemValue(item: T, valueKey: string): string
  • A function to extract the text string from each tree item. The default behavior will be to return the item[valueKey] and stringify it.


    • item: T
    • valueKey: string

    Returns string

  • onItemExpansion(itemId: string, expanded: boolean): void
  • onItemSelect(itemId: string): void
  • A function to call that will update the selectedIds to include itemId of the newly selected tree item. This will be triggered when:

    • the user clicks a tree item with mouse or touch
    • user presses the space or enter key while keyboard focusing a tree item

    Note: If you are using the useTreeItemSelection hook, this will always cause the selectedIds to be a list of just the selected itemId unless the multiSelect (second argument) is enabled.


    • itemId: string

    Returns void

  • A function to call that will update the selectedIds for "batch" selection updates. This will always be called with a unique list of itemIds that contained the previous itemIds including the new itemIds. This will only be called when the multiSelect prop has been enabled and:

    • the user Shift + Clicks items within the tree
    • triggers "select-to" keyboard functionality with Control+Shift+Home or Control+Shift+End


    Returns void

Generated using TypeDoc