Data Entryduskmoonimplemented7 demos

TreeSelect

TreeSelect combines tree selection with compact form input behavior.

Import@duskmoon-dev/components/tree-select

9API sections

55documented props

5behavior scenarios

Key API

allowCleardefaultOpendefaultValuedefaultExpandedKeysdefaultTreeExpandedKeysdisabled

Usage

When to use

Use it inside forms, filters, settings, and any workflow that captures user input.
Prefer controlled props when the value must stay synchronized with application state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Controlled and uncontrolled usage

Documents default values, value props, and change callbacks for form integration.

Validation state

Surfaces status, size, disabled, and option data patterns where the component supports them.

Primary API surface

TreeSelect is most often configured through `allowClear`, `defaultOpen`, `defaultValue`, `defaultExpandedKeys`.

Covered behavior

Renders treeData and selects a single value

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and TreeSelect from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { TreeSelect } from "@duskmoon-dev/components/tree-select";

export function Example() {
  return (<TreeSelect
  defaultValue="enabled"
/>);
}

Preview

Renders treeData and selects a single value

test-backed

TreeSelect scenario from the component test coverage: renders treedata and selects a single value.

Source

import "@duskmoon-dev/components/styles.css";
import { TreeSelect } from "@duskmoon-dev/components/tree-select";

export function TreeSelectRendersTreeDataAndSelectsDemo() {
  return (<TreeSelect
  // Renders treeData and selects a single value
  defaultValue="enabled"
/>);
}

Preview

Supports multiple treeCheckable selection and allowClear

test-backed

TreeSelect scenario from the component test coverage: supports multiple treecheckable selection and allowclear.

Source

import "@duskmoon-dev/components/styles.css";
import { TreeSelect } from "@duskmoon-dev/components/tree-select";

export function TreeSelectSupportsMultipleTreeCheckableSelectionDemo() {
  return (<TreeSelect
  // Supports multiple treeCheckable selection and allowClear
  defaultValue="enabled"
/>);
}

Preview

Supports controlled value, search, filtering, and callbacks

test-backed

TreeSelect scenario from the component test coverage: supports controlled value, search, filtering, and callbacks.

Source

import "@duskmoon-dev/components/styles.css";
import { TreeSelect } from "@duskmoon-dev/components/tree-select";

export function TreeSelectSupportsControlledValueSearchDemo() {
  return (<TreeSelect
  // Supports controlled value, search, filtering, and callbacks
  defaultValue="enabled"
/>);
}

Preview

Supports expansion control and loadData

test-backed

TreeSelect scenario from the component test coverage: supports expansion control and loaddata.

Source

import "@duskmoon-dev/components/styles.css";
import { TreeSelect } from "@duskmoon-dev/components/tree-select";

export function TreeSelectSupportsExpansionControlAndDemo() {
  return (<TreeSelect
  // Supports expansion control and loadData
  defaultValue="enabled"
/>);
}

Preview

Exposes TreeNode and checked strategy constants

test-backed

TreeSelect scenario from the component test coverage: exposes treenode and checked strategy constants.

Source

import "@duskmoon-dev/components/styles.css";
import { TreeSelect } from "@duskmoon-dev/components/tree-select";

export function TreeSelectExposesTreeNodeAndCheckedDemo() {
  return (<TreeSelect
  // Exposes TreeNode and checked strategy constants
  defaultValue="enabled"
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <TreeSelect
  defaultValue="enabled"
/>
</div>

<div data-theme="moonlight">
  <TreeSelect
  defaultValue="enabled"
/>
</div>

API

The API reference below lists every parsed exported type or interface for TreeSelect. Start with `allowClear`, `defaultOpen`, `defaultValue`, `defaultExpandedKeys` for common usage.

Types: packages/components/src/components/tree-select/TreeSelect.types.tsScenarios: packages/components/src/components/tree-select/TreeSelect.test.tsx

TreeSelectPropsinterface extends < T extends TreeSelectDataNode = TreeSelectDataNode, > extends Omit< ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSelect" >

Prop	Type	Required	Description
`allowClear`	`boolean`	No	allowClear configures TreeSelect.
`children`	`ReactNode`	No	children configures TreeSelect.
`defaultOpen`	`boolean`	No	defaultOpen configures TreeSelect.
`defaultValue`	`TreeSelectRawValue`	No	defaultValue configures TreeSelect.
`defaultExpandedKeys`	`TreeSelectValue[]`	No	defaultExpandedKeys configures TreeSelect.
`defaultTreeExpandedKeys`	`TreeSelectValue[]`	No	defaultTreeExpandedKeys configures TreeSelect.
`disabled`	`boolean`	No	disabled configures TreeSelect.
`expandedKeys`	`TreeSelectValue[]`	No	expandedKeys configures TreeSelect.
`filterTreeNode`	`boolean \| ((inputValue: string, node: T) => boolean)`	No	filterTreeNode configures TreeSelect.
`loadData`	`(node: T) => Promise<unknown> \| unknown`	No	loadData configures TreeSelect.
`multiple`	`boolean`	No	multiple configures TreeSelect.
`onChange`	`(`	No	onChange configures TreeSelect.
`value`	`TreeSelectRawValue \| undefined,`	Yes	value configures TreeSelect.
`label`	`ReactNode \| ReactNode[],`	Yes	label configures TreeSelect.
`extra`	`TreeSelectChangeExtra<T>,`	Yes	extra configures TreeSelect.
`onDropdownVisibleChange`	`(open: boolean) => void`	No	onDropdownVisibleChange configures TreeSelect.
`onSearch`	`(value: string) => void`	No	onSearch configures TreeSelect.
`onSelect`	`(`	No	onSelect configures TreeSelect.
`value`	`TreeSelectValue,`	Yes	value configures TreeSelect.
`node`	`T,`	Yes	node configures TreeSelect.
`extra`	`TreeSelectChangeExtra<T>,`	Yes	extra configures TreeSelect.
`open`	`boolean`	No	open configures TreeSelect.
`placeholder`	`ReactNode`	No	placeholder configures TreeSelect.
`searchValue`	`string`	No	searchValue configures TreeSelect.
`showSearch`	`boolean`	No	showSearch configures TreeSelect.
`treeCheckable`	`boolean`	No	treeCheckable configures TreeSelect.
`treeCheckedStrategy`	`TreeSelectCheckedStrategy`	No	treeCheckedStrategy configures TreeSelect.
`treeData`	`T[]`	No	treeData configures TreeSelect.
`treeDefaultExpandAll`	`boolean`	No	treeDefaultExpandAll configures TreeSelect.
`treeExpandedKeys`	`TreeSelectValue[]`	No	treeExpandedKeys configures TreeSelect.
`value`	`TreeSelectRawValue`	No	value configures TreeSelect.

TreeSelectDataNodeinterface

Prop	Type	Required	Description
`value`	`TreeSelectValue`	No	value configures TreeSelect.
`key`	`TreeSelectValue`	No	key configures TreeSelect.
`title`	`ReactNode`	No	title configures TreeSelect.
`label`	`ReactNode`	No	label configures TreeSelect.
`children`	`TreeSelectDataNode[]`	No	children configures TreeSelect.
`disabled`	`boolean`	No	disabled configures TreeSelect.
`disableCheckbox`	`boolean`	No	disableCheckbox configures TreeSelect.
`selectable`	`boolean`	No	selectable configures TreeSelect.
`checkable`	`boolean`	No	checkable configures TreeSelect.
`isLeaf`	`boolean`	No	isLeaf configures TreeSelect.
`className`	`string`	No	className configures TreeSelect.

TreeSelectNodePropsinterface extends Omit< ComponentProps<"div">, "title" | "onSelect" >

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures TreeSelect.
`value`	`TreeSelectValue`	Yes	value configures TreeSelect.
`children`	`ReactNode`	No	children configures TreeSelect.
`disabled`	`boolean`	No	disabled configures TreeSelect.
`disableCheckbox`	`boolean`	No	disableCheckbox configures TreeSelect.
`selectable`	`boolean`	No	selectable configures TreeSelect.
`checkable`	`boolean`	No	checkable configures TreeSelect.
`isLeaf`	`boolean`	No	isLeaf configures TreeSelect.

TreeSelectChangeExtrainterface extends < T extends TreeSelectDataNode = TreeSelectDataNode, >

Prop	Type	Required	Description
`triggerValue`	`TreeSelectValue`	No	triggerValue configures TreeSelect.
`selected`	`boolean`	No	selected configures TreeSelect.
`checked`	`boolean`	No	checked configures TreeSelect.
`triggerNode`	`T`	No	triggerNode configures TreeSelect.
`allCheckedNodes`	`T[]`	No	allCheckedNodes configures TreeSelect.

TreeSelectValuetype

string | number

TreeSelectRawValuetype

TreeSelectValue | TreeSelectValue[]

TreeSelectCheckedStrategytype

"SHOW_ALL" | "SHOW_PARENT" | "SHOW_CHILD"

TreeSelectNodeComponenttype

ForwardRefExoticComponent< TreeSelectNodeProps & RefAttributes<HTMLDivElement> >

TreeSelectComponenttype

(< T extends TreeSelectDataNode = TreeSelectDataNode, >( props: TreeSelectProps<T> & RefAttributes<HTMLDivElement>, ) => ReactElement | null) & { TreeNode: TreeSelectNodeComponent