TreePickerField

API reference and demos for TreePickerField.

Source

Import

import { TreePickerField } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
ariaLabel	string	—	Accessible name for the tree inside the panel.
className	string	—	—
closeOnSelect	boolean	true	Close after a row selection. Disable when a footer explicitly commits the pending node.
defaultOpen	(…) => boolean	—	—
disabled	boolean	—	—
empty	ReactNode	—	Empty-state content when `roots` is empty.
getAriaLabel	(…) => …	—	—
getChildren*	(…) => T[] | undefined	—	—
getKey*	(…) => string | number	—	—
getSearchText	(…) => string	—	—
hasMoreChildren	(…) => …	—	Reports nodes whose children should be fetched when first expanded.
isSelectable	(…) => boolean	—	Decides which nodes commit a selection when clicked. A click on a non-selectable node still toggles its expansion (it never closes the picker). Defaults to every node selectable.
label	ReactNode	—	Current-selection display in the trigger; falls back to `placeholder`.
loadChildren	(…) => …	—	Fetches a lazy node's children when it is first expanded.
onSelect*	(…) => void	—	Fires when a selectable node is clicked.
panelClassName	string	—	—
placeholder	string	Select…	—
renderFooter	(…) => ReactNode	—	Sticky row pinned below the tree inside the open panel — an escape hatch from a dropdown that has run out of room (a fuller browser, a "create new") rather than another node. It is handed `close` because acting on it almost always means leaving the dropdown behind.
renderRow*	(…) => ReactNode	—	—
renderTrigger	(…) => ReactNode	—	—
revealSelected	boolean	—	Initially reveals only the path to `selected` when the panel opens or the selection changes. Manual expansion and collapse then take precedence.
roots*	T[]	—	Root nodes of the tree to browse.
selected	T | null	—	Highlights the selected node inside the open tree.
showControls	boolean	—	Renders the tree's expand/collapse + filter toolbar.
size	enum	—	—
triggerAriaLabel	string	—	Accessible name for the closed picker trigger.
triggerClassName	string	—	—