diff --git a/packages/uikit/src/biz/TreeSelect/index.tsx b/packages/uikit/src/biz/TreeSelect/index.tsx
new file mode 100644
index 000000000..fab9f9fb5
--- /dev/null
+++ b/packages/uikit/src/biz/TreeSelect/index.tsx
@@ -0,0 +1,471 @@
+import { ReactNode, Ref, useEffect, useImperativeHandle, useMemo, useState } from 'react'
+
+import { IconChevronDown, IconChevronRight, IconChevronSelectorVertical } from '../../icons/index.js'
+import {
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  Group,
+  Input,
+  Text,
+  Flex,
+  BoxProps,
+  TextProps,
+  Combobox,
+  ComboboxProps,
+  useCombobox,
+  ComboboxStore,
+  ActionIcon,
+  LoadingOverlay,
+  InputProps,
+  ElementProps
+} from '../../primitive/index.js'
+
+import type {
+  LoadData,
+  OnStatusChange,
+  OnStatusChangeEvent,
+  RenderSelectItem,
+  SelectionProtectType,
+  SelectOption,
+  StatusChangeType,
+  TreeSelectOption
+} from './types'
+import { checkAll, checkOptionsByValue, flatArrayToTree, isSelectOptionChecked, treeToLeafArray } from './utils.js'
+
+export interface TreeSelectProps<T extends SelectionProtectType = string, R = any> {
+  options: TreeSelectOption<T>[] | SelectOption<T>[]
+  value?: T[]
+  onChange?: (value: T[], target: TreeSelectOption<T> | null) => void
+  onStatusChange?: OnStatusChange<T>
+  // works when multiple is true
+  changeTrigger?: 'onSelect' | 'onConfirm'
+  loadData?: LoadData<T, R>
+
+  comboboxProps?: Omit<ComboboxProps, 'children'>
+  comboboxRef?: Ref<ComboboxStore>
+
+  target?: ReactNode
+  defaultTargetProps?: InputProps & ElementProps<'input'>
+
+  selectItemProps?: SelectItemWrapperProps
+  renderSelectItem?: RenderSelectItem<T>
+
+  // multi-selection or single-selection
+  multiple?: boolean
+  emptyMessage?: string
+  // should the empty array be check all status
+  allWithEmpty?: boolean
+  // whether to show check all option
+  allowSelectAll?: boolean
+  loading?: boolean
+
+  searchable?: boolean
+  searchInputProps?: InputProps & ElementProps<'input'>
+}
+
+export const TreeSelect = <T extends SelectionProtectType = string>({
+  options,
+  value,
+  onChange,
+  onStatusChange,
+  changeTrigger = 'onConfirm',
+  loadData,
+  comboboxProps,
+  comboboxRef,
+  target,
+  defaultTargetProps,
+  selectItemProps,
+  renderSelectItem,
+  allWithEmpty = true,
+  emptyMessage = 'No data.',
+  allowSelectAll = true,
+  multiple,
+  loading,
+  searchable,
+  searchInputProps
+}: TreeSelectProps<T>) => {
+  const { disabled } = defaultTargetProps || {}
+  const combobox = useCombobox()
+  const [_options, setOptions] = useState<TreeSelectOption<T>[] | undefined>(undefined)
+  const internalOptions = useMemo<TreeSelectOption<T>[]>(() => {
+    if (!!_options) {
+      return _options
+    }
+
+    if (!!options.length && isSelectOptionChecked(options[0])) {
+      return flatArrayToTree(options)
+    }
+    return options
+  }, [options, _options])
+  const flatOptions = useMemo(() => treeToLeafArray(internalOptions), [internalOptions])
+  const itemCount = flatOptions.length
+  const isCheckAll = value && (allWithEmpty ? !value.length || value.length === itemCount : value.length === itemCount)
+  const selectedTips =
+    value === undefined ? '' : isCheckAll ? `All (${itemCount})` : `Checked ${value.length} (Total ${itemCount})`
+  const everyInternalChecked = flatOptions.every((o) => o.isChecked)
+  const someInternalChecked = flatOptions.some((o) => o.isChecked)
+  const everInternalNotChecked = flatOptions.every((o) => !o.isChecked)
+  const isArray = internalOptions.every((n) => !n.children?.length)
+
+  const _onValueChange = (v: TreeSelectOption<T>[], target: TreeSelectOption<T> | null) => {
+    const flatOptions = treeToLeafArray(v)
+    const isCheckAll = flatOptions.every((n) => n.isChecked)
+    onChange?.(isCheckAll && allWithEmpty ? [] : flatOptions.filter((n) => n.isChecked).map((n) => n.value), target)
+  }
+  const _onStatusChange: OnStatusChange<T> = (evt) => {
+    setOptions(evt.options)
+    onStatusChange?.(evt)
+  }
+  const afterCheckStatusChange: OnStatusChange<T> = (evt) => {
+    if (evt.type !== 'check') {
+      return
+    }
+    if (multiple && changeTrigger === 'onSelect') {
+      _onValueChange(evt.options!, evt.target!)
+    }
+    if (!multiple) {
+      const flatOptions = treeToLeafArray([evt.target!])
+      onChange?.(
+        flatOptions.map((n) => n.value),
+        evt.target!
+      )
+      combobox.closeDropdown()
+    }
+  }
+  const resetCheckedStatus = () => setOptions(checkOptionsByValue(internalOptions, value || [], allWithEmpty))
+
+  useEffect(() => {
+    // value could be undefined
+    _onStatusChange({ type: 'check', options: checkOptionsByValue(options, value || [], allWithEmpty) })
+  }, [options, value])
+
+  useImperativeHandle(comboboxRef, () => combobox, [combobox])
+
+  return (
+    <Combobox {...comboboxProps} shadow="sm" onClose={resetCheckedStatus} store={combobox}>
+      <Combobox.Target>
+        {target ? (
+          target
+        ) : (
+          <Input
+            styles={{
+              input: {
+                userSelect: 'none',
+                height: '40px',
+                lineHeight: '38px',
+                paddingRight: '40px',
+                ':hover': {
+                  cursor: disabled ? 'not-allowed' : 'pointer'
+                },
+                '::selection': {
+                  backgroundColor: 'transparent'
+                }
+              },
+              section: {
+                width: '40px',
+                pointerEvents: 'none'
+              }
+            }}
+            sx={{
+              lineHeight: '1.55'
+            }}
+            value={selectedTips}
+            readOnly
+            rightSection={<IconChevronSelectorVertical size={16} />}
+            onClick={() => combobox.toggleDropdown()}
+            {...defaultTargetProps}
+          />
+        )}
+      </Combobox.Target>
+      <Combobox.Dropdown p={0}>
+        {searchable && (
+          <Box>
+            <Input px="sm" {...searchInputProps} variant="unstyled" />
+            <Divider color="carbon.3" />
+          </Box>
+        )}
+        <Box pos="relative">
+          <LoadingOverlay visible={loading} zIndex={1000} overlayProps={{ radius: 'sm', blur: 2 }} />
+          {internalOptions.length ? (
+            <>
+              {allowSelectAll && (
+                <>
+                  <SelectItem
+                    label={selectedTips}
+                    value="all"
+                    isLeaf
+                    isArray={isArray}
+                    isChecked={everyInternalChecked}
+                    indeterminate={someInternalChecked && !everyInternalChecked}
+                    onCheckStatusChange={(v) => {
+                      const allOptions = checkAll(internalOptions, v)
+                      const evt: OnStatusChangeEvent<T> = {
+                        type: 'check',
+                        options: allOptions,
+                        target: { label: 'All', value: 'all' as T, children: allOptions }
+                      }
+                      _onStatusChange(evt)
+                      afterCheckStatusChange(evt)
+                    }}
+                    multiple={multiple}
+                    {...selectItemProps}
+                  />
+                  <Divider color="carbon.3" />
+                </>
+              )}
+              <Box mah={240} sx={{ overflow: 'auto' }}>
+                <SelectItems<T>
+                  value={internalOptions}
+                  renderSelectItem={renderSelectItem}
+                  onChange={(evt) => {
+                    _onStatusChange(evt)
+                    afterCheckStatusChange(evt)
+                  }}
+                  loadData={loadData}
+                  multiple={multiple}
+                  isArray={isArray}
+                  {...selectItemProps}
+                />
+              </Box>
+              {multiple && changeTrigger === 'onConfirm' && (
+                <>
+                  <Divider color="carbon.3" />
+                  <Group p="md" gap={8} justify="flex-end">
+                    <Button
+                      variant="default"
+                      size="xs"
+                      onClick={() => {
+                        resetCheckedStatus()
+                        combobox.closeDropdown()
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      size="xs"
+                      onClick={() => {
+                        _onValueChange(internalOptions, null)
+                        combobox.closeDropdown()
+                      }}
+                      disabled={everInternalNotChecked}
+                    >
+                      Apply
+                    </Button>
+                  </Group>
+                </>
+              )}
+            </>
+          ) : (
+            <Flex my={16} justify="center">
+              {emptyMessage}
+            </Flex>
+          )}
+        </Box>
+      </Combobox.Dropdown>
+    </Combobox>
+  )
+}
+
+interface SelectItemsProps<T extends SelectionProtectType = string> {
+  value: TreeSelectOption<T>[]
+  onChange: OnStatusChange<T>
+  level?: number
+  renderSelectItem?: RenderSelectItem<T>
+  loadData?: LoadData<T>
+  multiple?: boolean
+  isArray?: boolean
+}
+
+const SelectItems = <T extends SelectionProtectType = string>({
+  value,
+  level = 0,
+  onChange,
+  ...rest
+}: SelectItemsProps<T>) => {
+  return (
+    <>
+      {value.map((v, i) => {
+        return (
+          <SelectItemWithChildren<T>
+            key={v.value}
+            value={v}
+            level={level}
+            onChange={(evt) =>
+              onChange({ ...evt, node: evt.node, options: [...value.slice(0, i), evt.node!, ...value.slice(i + 1)] })
+            }
+            onChildrenChange={(evt) => {
+              const childChange = { ...v, children: evt.options }
+              onChange({
+                ...evt,
+                node: childChange,
+                options: [...value.slice(0, i), childChange, ...value.slice(i + 1)]
+              })
+            }}
+            {...rest}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+interface SelectItemWithChildrenProps<T extends SelectionProtectType = string> {
+  value: TreeSelectOption<T>
+  onChange: OnStatusChange<T>
+  onChildrenChange: (evt: {
+    type: StatusChangeType
+    options: TreeSelectOption<T>[]
+    target: TreeSelectOption<T>
+  }) => void
+  level?: number
+  renderSelectItem?: (options: SelectItemProps<T>) => React.ReactNode
+  selectItemProps?: SelectItemWrapperProps
+  loadData?: (id: T) => Promise<any>
+  isArray?: boolean
+}
+
+const SelectItemWithChildren = <T extends SelectionProtectType = string>({
+  value,
+  level = 0,
+  onChange,
+  onChildrenChange,
+  renderSelectItem,
+  ...rest
+}: SelectItemWithChildrenProps<T>) => {
+  const someChildrenChecked = treeToLeafArray(value.children || []).some((c) => c.isChecked)
+  const everyChildrenChecked = treeToLeafArray(value.children || []).every((c) => c.isChecked)
+  return (
+    <>
+      <SelectItem<T>
+        {...value}
+        level={level}
+        someChildrenChecked={someChildrenChecked}
+        everyChildrenChecked={everyChildrenChecked}
+        showChildren={value.showChildren}
+        onShowChildrenChange={(v) => {
+          const target = { ...value, showChildren: v }
+          onChange({ type: 'showChildren', node: target, target })
+        }}
+        onCheckStatusChange={(v) => {
+          const target = {
+            ...value,
+            isChecked: v,
+            children: value.isLeaf ? value.children : checkAll(value.children!, v)
+          }
+          onChange({
+            type: 'check',
+            node: target,
+            target
+          })
+        }}
+        renderSelectItem={renderSelectItem}
+        {...rest}
+      />
+      {value.children && value.showChildren && (
+        <SelectItems<T>
+          value={value.children}
+          level={level + 1}
+          onChange={onChildrenChange}
+          renderSelectItem={renderSelectItem}
+          {...rest}
+        />
+      )}
+    </>
+  )
+}
+
+interface SelectItemWrapperProps extends Omit<BoxProps, 'children'> {
+  textProps?: TextProps
+}
+
+interface SelectItemProps<T extends SelectionProtectType = string> extends TreeSelectOption<T>, SelectItemWrapperProps {
+  onCheckStatusChange: (v: boolean) => void
+  onShowChildrenChange?: (v: boolean) => void
+  indeterminate?: boolean
+  level?: number
+  showChildren?: boolean
+  someChildrenChecked?: boolean
+  everyChildrenChecked?: boolean
+  multiple?: boolean
+  loadData?: (id: T) => Promise<any>
+  isArray?: boolean
+}
+
+const SelectItem = <T extends SelectionProtectType = string>({
+  label,
+  indeterminate,
+  level = 0,
+  isLeaf,
+  someChildrenChecked,
+  everyChildrenChecked,
+  showChildren,
+  onShowChildrenChange,
+  onCheckStatusChange,
+  isChecked,
+  disabled,
+  renderSelectItem,
+  value,
+  loadData,
+  multiple,
+  isArray,
+  ...rest
+}: SelectItemProps<T>) => {
+  const { textProps, ...wrapperProps } = rest
+  const [isLoading, setLoading] = useState(false)
+
+  return (
+    <Box pl={32 * level} {...wrapperProps}>
+      <Group px="sm" gap={8} wrap="nowrap" sx={{ userSelect: 'none' }}>
+        {!isArray &&
+          (!isLeaf ? (
+            <ActionIcon
+              size={24}
+              loading={isLoading}
+              onClick={async () => {
+                if (!!loadData && !rest.children?.length) {
+                  setLoading(true)
+                  await loadData(value)
+                  setLoading(false)
+                }
+
+                onShowChildrenChange?.(!showChildren)
+              }}
+            >
+              {showChildren ? <IconChevronDown size={16} /> : <IconChevronRight size={16} />}
+            </ActionIcon>
+          ) : (
+            <Box px={12} py={14}></Box>
+          ))}
+        <Box
+          py={8}
+          sx={{ cursor: 'pointer', flexGrow: 1 }}
+          onClick={(e) => {
+            e.stopPropagation()
+            const checkStatus = isLeaf ? !isChecked : !everyChildrenChecked
+            onCheckStatusChange(checkStatus)
+          }}
+        >
+          <Group gap={8} wrap="nowrap">
+            {multiple && (
+              <Checkbox
+                indeterminate={(!isLeaf && someChildrenChecked && !everyChildrenChecked) || indeterminate}
+                checked={isLeaf ? isChecked : everyChildrenChecked}
+                disabled={disabled}
+                readOnly
+              />
+            )}
+            {!!renderSelectItem ? (
+              renderSelectItem({ label, value, disabled })
+            ) : (
+              <Text truncate maw="80%" {...textProps}>
+                {label}
+              </Text>
+            )}
+          </Group>
+        </Box>
+      </Group>
+    </Box>
+  )
+}
diff --git a/packages/uikit/src/biz/TreeSelect/types.ts b/packages/uikit/src/biz/TreeSelect/types.ts
new file mode 100644
index 000000000..ed3196dcc
--- /dev/null
+++ b/packages/uikit/src/biz/TreeSelect/types.ts
@@ -0,0 +1,40 @@
+export type SelectionProtectType = string | number
+
+export interface TreeSelectOption<T extends SelectionProtectType = string> {
+  label: string
+  value: T
+  disabled?: boolean
+  isChecked?: boolean
+  isLeaf?: boolean
+  showChildren?: boolean
+  children?: TreeSelectOption<T>[]
+  renderSelectItem?: (options: TreeSelectOption<T>) => React.ReactNode
+}
+
+export interface SelectOption<T extends SelectionProtectType = string> extends Omit<TreeSelectOption<T>, 'children'> {
+  parent?: T
+}
+
+export type StatusChangeType = 'check' | 'showChildren'
+
+export interface OnStatusChangeEvent<T extends SelectionProtectType = string> {
+  type: StatusChangeType
+  target?: TreeSelectOption<T>
+  node?: TreeSelectOption<T>
+  options?: TreeSelectOption<T>[]
+}
+export interface OnStatusChange<T extends SelectionProtectType = string> {
+  (evt: OnStatusChangeEvent<T>): void
+}
+
+export interface OnValueChange<T extends SelectionProtectType = string> {
+  (value: TreeSelectOption<T>[]): void
+}
+
+export interface LoadData<T extends SelectionProtectType = string, R = any> {
+  (id: T): Promise<R>
+}
+
+export interface RenderSelectItem<T extends SelectionProtectType = string> {
+  (options: TreeSelectOption<T>): React.ReactNode
+}
diff --git a/packages/uikit/src/biz/TreeSelect/utils.ts b/packages/uikit/src/biz/TreeSelect/utils.ts
new file mode 100644
index 000000000..d94d827fb
--- /dev/null
+++ b/packages/uikit/src/biz/TreeSelect/utils.ts
@@ -0,0 +1,137 @@
+import type { SelectionProtectType, SelectOption, TreeSelectOption } from './types'
+
+/**
+ * Check or uncheck all the options in the given TreeSelectOption array.
+ *
+ * The given boolean value will be applied to all the options, unless the
+ * option is disabled. If an option has children, the given boolean value
+ * will be applied to all of them recursively.
+ *
+ * @param options - The TreeSelectOption array to be checked or unchecked
+ * @param isChecked - The boolean value to be applied to all the options
+ * @returns The checked or unchecked TreeSelectOption array
+ */
+export const checkAll = <T extends SelectionProtectType = string>(
+  options: TreeSelectOption<T>[],
+  isChecked: boolean
+): TreeSelectOption<T>[] => {
+  return options.map((v) => ({
+    ...v,
+    // skip disabled
+    isChecked: v.disabled ? false : isChecked,
+    children: v.children ? checkAll(v.children, isChecked) : undefined
+  }))
+}
+
+/**
+ * Check TreeSelectOption items based on given value array.
+ *
+ * If the value array is empty, all options will be checked.
+ *
+ * @param options - TreeSelectOption items
+ * @param value - Value array
+ * @returns Checked TreeSelectOption items
+ */
+export const checkOptionsByValue = <T extends SelectionProtectType = string>(
+  options: TreeSelectOption<T>[],
+  value: T[],
+  allWithEmpty: boolean
+): TreeSelectOption<T>[] => {
+  if (!!options?.length && !value.length) {
+    return checkAll(options, allWithEmpty)
+  }
+  return options.map((op) => {
+    if (op.children?.length) {
+      op.children = checkOptionsByValue(op.children, value, allWithEmpty)
+    }
+    return { ...op, isChecked: value.includes(op.value) }
+  })
+}
+
+/**
+ * Flatten all leaf nodes from a TreeSelectOption array.
+ *
+ * A leaf node is a node that has no children and is not disabled.
+ *
+ * @param value - TreeSelectOption array
+ * @returns An array of leaf nodes
+ */
+export const treeToLeafArray = <T extends SelectionProtectType = string>(
+  value: TreeSelectOption<T>[],
+  parent?: TreeSelectOption<T>
+) =>
+  value.reduce((prev, cur) => {
+    const { children, ...rest } = cur
+    if (cur.isLeaf && !cur.disabled) {
+      prev.push({ ...rest, parent: parent?.value })
+    }
+    if (children) {
+      prev.push(...treeToLeafArray(children, rest))
+    }
+    return prev
+  }, [] as SelectOption<T>[])
+
+/**
+ * Flatten a TreeSelectOption array into a plain array of SelectOption.
+ *
+ * This function will traverse the tree recursively and return all the leaf
+ * nodes in a single array. Each leaf node will have a parent field pointing to
+ * its parent node's value.
+ *
+ * @param value - The TreeSelectOption array to be flattened
+ * @param parent - The parent node of the current node
+ * @returns An array of SelectOption
+ */
+export const treeToFlatArray = <T extends SelectionProtectType = string>(
+  value: TreeSelectOption<T>[],
+  parent?: TreeSelectOption<T>
+) => {
+  return value.reduce((prev, cur) => {
+    const { children, ...rest } = cur
+    prev.push({ ...rest, parent: parent?.value })
+    if (children) {
+      prev.push(...treeToFlatArray(children, rest))
+    }
+    return prev
+  }, [] as SelectOption<T>[])
+}
+
+/**
+ * Converts a flat array of SelectOption items into a tree structure of TreeSelectOption.
+ *
+ * This function organizes the flat array by mapping each option to its parent based on the parent field.
+ * Options without a parent are considered root nodes and are directly added to the tree array.
+ * Children are recursively added to their respective parent nodes.
+ *
+ * @param value - The flat array of SelectOption items to be converted into a tree structure.
+ * @returns A TreeSelectOption array representing the hierarchical tree structure.
+ */
+
+export const flatArrayToTree = <T extends SelectionProtectType = string>(value: SelectOption<T>[]) => {
+  const treeArr: TreeSelectOption<T>[] = []
+  const treeMap = new Map<T, TreeSelectOption<T>>()
+  value.forEach((v) => {
+    const { parent, ...rest } = v
+    treeMap.set(v.value, { ...rest, children: [] })
+  })
+  value.forEach((v) => {
+    const node = treeMap.get(v.value)!
+    if (!v.parent) {
+      treeArr.push(node)
+      return
+    }
+
+    const parent = treeMap.get(v.parent)
+    if (!parent) {
+      return
+    }
+
+    parent.children!.push(node)
+  })
+
+  return treeArr
+}
+
+export const isSelectOptionChecked = <T extends SelectionProtectType = string>(
+  option: SelectOption<T> | TreeSelectOption<T>
+): option is SelectOption<T> => !!(option as SelectOption<T>).parent && !(option as TreeSelectOption<T>).children
diff --git a/packages/uikit/src/biz/index.ts b/packages/uikit/src/biz/index.ts
index 8cbd2a425..88de1e6d3 100644
--- a/packages/uikit/src/biz/index.ts
+++ b/packages/uikit/src/biz/index.ts
@@ -12,3 +12,6 @@ export * from './PropertyCard/index.js'
 export * from './PageShell/index.js'
 export * from './TimeRangePicker/index.js'
 export * from './DateTimePicker/index.js'
+export * from './TreeSelect/index.js'
+
+export type * from './TreeSelect/types'
diff --git a/packages/uikit/src/primitive/index.ts b/packages/uikit/src/primitive/index.ts
index e4192f346..6d6c24708 100644
--- a/packages/uikit/src/primitive/index.ts
+++ b/packages/uikit/src/primitive/index.ts
@@ -57,6 +57,7 @@ export type {
   ComboboxProps,
   ComboboxItem,
   ComboboxData,
+  ComboboxStore,
   PillProps,
   PillsInputProps,
   OptionsFilter,
diff --git a/stories/uikit/biz/TreeSelect.stories.tsx b/stories/uikit/biz/TreeSelect.stories.tsx
new file mode 100644
index 000000000..ece643294
--- /dev/null
+++ b/stories/uikit/biz/TreeSelect.stories.tsx
@@ -0,0 +1,466 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button, ComboboxStore, Stack, Text } from '@tidbcloud/uikit'
+import { TreeSelect, TreeSelectOption } from '@tidbcloud/uikit/biz'
+import { useRef, useState } from 'react'
+
+type Story = StoryObj<typeof TreeSelect>
+
+const meta: Meta<typeof TreeSelect> = {
+  title: 'Biz/TreeSelect',
+  component: TreeSelect,
+  tags: ['autodocs'],
+  parameters: {}
+}
+
+export default meta
+
+function getTreeData(): TreeSelectOption[] {
+  return [
+    {
+      label: 'TiDB Serverless',
+      value: 'TiDB Serverless',
+      isLeaf: false,
+      children: [
+        // {
+        //   label: 'Row-based Storage',
+        //   value: 'TiDB Serverless - Row-based Storage',
+        //   isLeaf: true
+        // },
+        // {
+        //   label: 'Columnar Storage',
+        //   value: 'TiDB Serverless - Columnar Storage',
+        //   isLeaf: true
+        // },
+        // {
+        //   label: 'Request Units',
+        //   value: 'TiDB Serverless - Request Units',
+        //   isLeaf: true
+        // }
+      ]
+    },
+    {
+      label: 'TiDB Dedicated',
+      value: 'TiDB Dedicated',
+      isLeaf: false,
+      children: [
+        {
+          label: 'Node Compute',
+          value: 'Node Compute',
+          isLeaf: false,
+          children: [
+            {
+              label: 'TiDB',
+              value: 'TiDB Dedicated - Node Compute - TiDB',
+              isLeaf: true
+            },
+            {
+              label: 'TiKV',
+              value: 'TiDB Dedicated - Node Compute - TiKV',
+              isLeaf: true
+            },
+            {
+              label: 'TiFlash',
+              value: 'TiDB Dedicated - Node Compute - TiFlash',
+              isLeaf: true
+            }
+          ]
+        },
+        {
+          label: 'Node Storage',
+          value: 'Node Storage',
+          isLeaf: false,
+          children: [
+            {
+              label: 'TiKV',
+              value: 'TiDB Dedicated - Node Storage - TiKV',
+              isLeaf: true
+            },
+            {
+              label: 'TiFlash',
+              value: 'TiDB Dedicated - Node Storage - TiFlash',
+              isLeaf: true
+            }
+          ]
+        },
+        {
+          label: 'Backup',
+          value: 'Backup',
+          isLeaf: false,
+          children: [
+            {
+              label: 'Single Region Storage',
+              value: 'TiDB Dedicated - Backup - Single Region Storage',
+              isLeaf: true
+            },
+            {
+              label: 'Dual Region Storage',
+              value: 'TiDB Dedicated - Backup - Dual Region Storage',
+              isLeaf: true
+            },
+            {
+              label: 'Replication',
+              value: 'TiDB Dedicated - Backup - Replication',
+              isLeaf: true
+            }
+          ]
+        },
+        {
+          label: 'Data Migration',
+          value: 'Data Migration',
+          isLeaf: false,
+          children: [
+            {
+              label: 'Replication Capacity Units (RCU)',
+              value: 'TiDB Dedicated - Data Migration - Replication Capacity Units (RCU)',
+              isLeaf: true
+            }
+          ]
+        },
+        {
+          label: 'Changefeed',
+          value: 'Changefeed',
+          isLeaf: false,
+          children: [
+            {
+              label: 'Replication Capacity Units',
+              value: 'TiDB Dedicated - Changefeed - Replication Capacity Units',
+              isLeaf: true
+            }
+          ]
+        },
+        {
+          label: 'Data Transfer',
+          value: 'Data Transfer',
+          isLeaf: false,
+          children: [
+            {
+              label: 'Internet',
+              value: 'TiDB Dedicated - Data Transfer - Internet',
+              isLeaf: true
+            },
+            {
+              label: 'Cross Region',
+              value: 'TiDB Dedicated - Data Transfer - Cross Region',
+              isLeaf: true
+            },
+            {
+              label: 'Same Region',
+              value: 'TiDB Dedicated - Data Transfer - Same Region',
+              isLeaf: true
+            },
+            {
+              label: 'Load Balancing',
+              value: 'TiDB Dedicated - Data Transfer - Load Balancing',
+              isLeaf: true
+            },
+            {
+              label: 'DM NAT Gateway',
+              value: 'TiDB Dedicated - Data Transfer - DM NAT Gateway',
+              isLeaf: true
+            },
+            {
+              label: 'Private Data Link',
+              value: 'TiDB Dedicated - Data Transfer - Private Data Link',
+              isLeaf: true
+            }
+          ]
+        },
+        {
+          label: 'Recovery Group',
+          value: 'Recovery Group',
+          isLeaf: false,
+          children: [
+            {
+              label: 'Recovery Group Service',
+              value: 'TiDB Dedicated - Recovery Group - Recovery Group Service',
+              isLeaf: true
+            },
+            {
+              label: 'Same Region Data Processing',
+              value: 'TiDB Dedicated - Recovery Group - Same Region Data Processing',
+              isLeaf: true
+            },
+            {
+              label: 'Cross Region Data Processing',
+              value: 'TiDB Dedicated - Recovery Group - Cross Region Data Processing',
+              isLeaf: true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: 'Support Plan',
+      value: 'Support Plan',
+      isLeaf: true
+    }
+  ]
+}
+
+function MultipleDemo() {
+  const [value, setValue] = useState<string[]>([])
+  return (
+    <TreeSelect
+      comboboxProps={{ width: 'target' }}
+      value={value}
+      options={getTreeData()}
+      onChange={(v) => {
+        console.log(`checked:`, v)
+        setValue(v)
+      }}
+      multiple
+      loadData={() => new Promise((resolve) => setTimeout(() => resolve([]), 1000))}
+    />
+  )
+}
+
+function SingleDemo() {
+  const [value, setValue] = useState<string[]>([])
+  const treeSelectRef = useRef<ComboboxStore>(null)
+
+  return (
+    <Stack>
+      <Text>Selected: {value.join(', ')}</Text>
+      <TreeSelect
+        comboboxRef={treeSelectRef}
+        comboboxProps={{ width: 'target' }}
+        value={value}
+        options={getTreeData()}
+        onChange={(v, target) => {
+          console.log(`checked:`, v, target)
+          setValue(v)
+        }}
+        loadData={() => new Promise((resolve) => setTimeout(() => resolve([]), 1000))}
+        allowSelectAll={false}
+        target={<Button onClick={() => treeSelectRef.current?.toggleDropdown()}>Single Select</Button>}
+      />
+    </Stack>
+  )
+}
+
+const code = `
+import { TreeSelect, TreeSelectOption } from '@tidbcloud/uikit/biz'
+
+function getTreeData(): TreeSelectOption[] {
+  return [
+    {
+      label: 'TiDB Serverless',
+      value: 'TiDB Serverless',
+      isLeaf: false,
+      children: [
+        {
+          label: 'Row-based Storage',
+          value: 'TiDB Serverless - Row-based Storage',
+          isLeaf: true
+        },
+        {
+          label: 'Columnar Storage',
+          value: 'TiDB Serverless - Columnar Storage',
+          isLeaf: true
+        },
+        {
+          label: 'Request Units',
+          value: 'TiDB Serverless - Request Units',
+          isLeaf: true
+        }
+      ]
+    },
+    {
+      label: 'TiDB Dedicated',
+      value: 'TiDB Dedicated',
+      isLeaf: false,
+      children: [
+        {
+          label: 'Node Compute',
+          value: 'Node Compute',
+          isLeaf: false,
+          children: [
+            {
+              label: 'TiDB',
+              value: 'TiDB Dedicated - Node Compute - TiDB',
+              isLeaf: true
+            },
+            {
+              label: 'TiKV',
+              value: 'TiDB Dedicated - Node Compute - TiKV',
+              isLeaf: true
+            },
+            {
+              label: 'TiFlash',
+              value: 'TiDB Dedicated - Node Compute - TiFlash',
+              isLeaf: true
+            }
+          ]
+        },
+        {
+          label: 'Node Storage',
+          value: 'Node Storage',
+          isLeaf: false,
+          children: [
+            {
+              label: 'TiKV',
+              value: 'TiDB Dedicated - Node Storage - TiKV',
+              isLeaf: true
+            },
+            {
+              label: 'TiFlash',
+              value: 'TiDB Dedicated - Node Storage - TiFlash',
+              isLeaf: true
+            }
+          ]
+        },
+        {
+          label: 'Backup',
+          value: 'Backup',
+          isLeaf: false,
+          children: [
+            {
+              label: 'Single Region Storage',
+              value: 'TiDB Dedicated - Backup - Single Region Storage',
+              isLeaf: true
+            },
+            {
+              label: 'Dual Region Storage',
+              value: 'TiDB Dedicated - Backup - Dual Region Storage',
+              isLeaf: true
+            },
+            {
+              label: 'Replication',
+              value: 'TiDB Dedicated - Backup - Replication',
+              isLeaf: true
+            }
+          ]
+        },
+        {
+          label: 'Data Migration',
+          value: 'Data Migration',
+          isLeaf: false,
+          children: [
+            {
+              label: 'Replication Capacity Units (RCU)',
+              value: 'TiDB Dedicated - Data Migration - Replication Capacity Units (RCU)',
+              isLeaf: true
+            }
+          ]
+        },
+        {
+          label: 'Changefeed',
+          value: 'Changefeed',
+          isLeaf: false,
+          children: [
+            {
+              label: 'Replication Capacity Units',
+              value: 'TiDB Dedicated - Changefeed - Replication Capacity Units',
+              isLeaf: true
+            }
+          ]
+        },
+        {
+          label: 'Data Transfer',
+          value: 'Data Transfer',
+          isLeaf: false,
+          children: [
+            {
+              label: 'Internet',
+              value: 'TiDB Dedicated - Data Transfer - Internet',
+              isLeaf: true
+            },
+            {
+              label: 'Cross Region',
+              value: 'TiDB Dedicated - Data Transfer - Cross Region',
+              isLeaf: true
+            },
+            {
+              label: 'Same Region',
+              value: 'TiDB Dedicated - Data Transfer - Same Region',
+              isLeaf: true
+            },
+            {
+              label: 'Load Balancing',
+              value: 'TiDB Dedicated - Data Transfer - Load Balancing',
+              isLeaf: true
+            },
+            {
+              label: 'DM NAT Gateway',
+              value: 'TiDB Dedicated - Data Transfer - DM NAT Gateway',
+              isLeaf: true
+            },
+            {
+              label: 'Private Data Link',
+              value: 'TiDB Dedicated - Data Transfer - Private Data Link',
+              isLeaf: true
+            }
+          ]
+        },
+        {
+          label: 'Recovery Group',
+          value: 'Recovery Group',
+          isLeaf: false,
+          children: [
+            {
+              label: 'Recovery Group Service',
+              value: 'TiDB Dedicated - Recovery Group - Recovery Group Service',
+              isLeaf: true
+            },
+            {
+              label: 'Same Region Data Processing',
+              value: 'TiDB Dedicated - Recovery Group - Same Region Data Processing',
+              isLeaf: true
+            },
+            {
+              label: 'Cross Region Data Processing',
+              value: 'TiDB Dedicated - Recovery Group - Cross Region Data Processing',
+              isLeaf: true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: 'Support Plan',
+      value: 'Support Plan',
+      isLeaf: true
+    }
+  ]
+}
+
+function Demo() {
+  return
+    <TreeSelect
+      comboboxProps={{ width: 'target' }}
+      value={[]}
+      options={getTreeData()}
+      multiple
+      loadData={() => new Promise((resolve) => setTimeout(() => resolve([]), 1000))}
+    />
+}
+`
+
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+export const Multiple: Story = {
+  parameters: {
+    controls: { expanded: true },
+    docs: {
+      source: {
+        language: 'jsx',
+        code
+      }
+    }
+  },
+  render: () => <MultipleDemo />,
+  args: {}
+}
+
+export const Single: Story = {
+  parameters: {
+    controls: { expanded: true },
+    docs: {
+      source: {
+        language: 'jsx',
+        code
+      }
+    }
+  },
+  render: () => <SingleDemo />,
+  args: {}
+}