Checkbox Tree

The CheckboxTree component renders a hierarchical tree where every node has a checkbox. Checking a group cascades to all of its descendants, and parent groups automatically show an indeterminate (mixed) state when only some of their descendants are selected. It supports an optional Select All row and expand/collapse of groups.

It is a compound component composed of CheckboxTree.Root, CheckboxTree.Group, and CheckboxTree.Item. Selection is controlled via selectedIds + onSelectionChange (leaf ids only); parent/child relationships are derived from JSX nesting. Enable showCount on the Root to render each group’s leaf-descendant count (e.g. “Resources (16)”) — it is computed automatically, with no count prop to maintain.

Usage

import { CheckboxTree } from '@harnessio/ui/components'

const [selectedIds, setSelectedIds] = useState<string[]>([])

return (
  <CheckboxTree.Root
    className="w-full rounded-cn-2 border border-cn-3"
    selectedIds={selectedIds}
    onSelectionChange={setSelectedIds}
    defaultExpandedIds={['resources']}
    showSelectAll
  >
    <CheckboxTree.Group id="resources" label="Resources">
      <CheckboxTree.Item id="audit-logs" label="Audit logs" />
      <CheckboxTree.Item id="roles" label="Roles" />
    </CheckboxTree.Group>
  </CheckboxTree.Root>
)

Deeply Nested Groups

Groups can be nested to any depth. Each level indents its content, and every group reflects the aggregate state of all leaves beneath it.

Custom Group Icons

Each group renders a folder icon before its label by default. Pass the icon prop to override it with any IconV2 icon name.

Disabled Nodes

Set disabled on the Root to disable the whole tree, or on an individual Group/Item.

API Reference

CheckboxTree.Root Props

Prop	Required	Default	Type
selectedIds	true		string[]
onSelectionChange	true		(ids: string[]) => void
defaultExpandedIds	false		string[]
showSelectAll	false	false	boolean
selectAllLabel	false	'Select All'	string
showCount	false	false	boolean
disabled	false		boolean
className	false		string

CheckboxTree.Group Props

Prop	Required	Default	Type
id	true		string
label	true		React.ReactNode
disabled	false		boolean
icon	false	'folder'	IconV2NamesType

CheckboxTree.Item Props

Prop	Required	Default	Type
id	true		string
label	true		React.ReactNode
disabled	false		boolean