0
# Selection & Checking
1

2
RC Tree provides comprehensive selection and checking functionality with support for single/multiple selection, checkbox hierarchies, and strict/non-strict checking modes.
3

4
## Capabilities
5

6
### Selection System
7

8
Node selection system supporting both single and multiple selection modes with full event handling.
9

10
```typescript { .api }
11
/**
12
 * Selection configuration and event handling
13
 */
14
interface SelectionConfig<TreeDataType extends BasicDataNode = DataNode> {
15
  /** Enable node selection */
16
  selectable?: boolean;
17
  /** Allow multiple node selection */
18
  multiple?: boolean;
19
  /** Currently selected node keys (controlled) */
20
  selectedKeys?: Key[];
21
  /** Default selected keys (uncontrolled) */
22
  defaultSelectedKeys?: Key[];
23
  /** Currently active/focused node key */
24
  activeKey?: Key | null;
25
  
26
  /** Selection change event handler */
27
  onSelect?: (
28
    selectedKeys: Key[],
29
    info: {
30
      event: 'select';
31
      selected: boolean;
32
      node: EventDataNode<TreeDataType>;
33
      selectedNodes: TreeDataType[];
34
      nativeEvent: MouseEvent;
35
    },
36
  ) => void;
37
  
38
  /** Active node change handler (internal) */
39
  onActiveChange?: (key: Key) => void;
40
}
41
```
42

43
### Checkbox System
44

45
Comprehensive checkbox system with hierarchical checking and strict/non-strict modes.
46

47
```typescript { .api }
48
/**
49
 * Checkbox configuration and event handling
50
 */
51
interface CheckboxConfig<TreeDataType extends BasicDataNode = DataNode> {
52
  /** Enable checkboxes (true/false or custom checkbox element) */
53
  checkable?: boolean | React.ReactNode;
54
  /** Independent checking (parent-child relationship disabled) */
55
  checkStrictly?: boolean;
56
  /** Currently checked keys (controlled) */
57
  checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };
58
  /** Default checked keys (uncontrolled) */
59
  defaultCheckedKeys?: Key[];
60
  
61
  /** Check state change event handler */
62
  onCheck?: (
63
    checked: { checked: Key[]; halfChecked: Key[] } | Key[],
64
    info: CheckInfo<TreeDataType>,
65
  ) => void;
66
}
67

68
/**
69
 * Detailed information provided in check events
70
 */
71
interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
72
  /** Event type identifier */
73
  event: 'check';
74
  /** The node that was checked/unchecked */
75
  node: EventDataNode<TreeDataType>;
76
  /** New checked state of the node */
77
  checked: boolean;
78
  /** Native mouse event */
79
  nativeEvent: MouseEvent;
80
  /** Array of all checked node data */
81
  checkedNodes: TreeDataType[];
82
  /** Array of checked nodes with their positions */
83
  checkedNodesPositions?: { node: TreeDataType; pos: string }[];
84
  /** Keys of half-checked (indeterminate) nodes */
85
  halfCheckedKeys?: Key[];
86
}
87
```
88

89
**Usage Examples:**
90

91
### Basic Selection
92

93
```typescript
94
import React, { useState } from "react";
95
import Tree, { TreeNode } from "rc-tree";
96

97
const BasicSelection = () => {
98
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
99

100
  return (
101
    <Tree
102
      prefixCls="rc-tree"
103
      selectable
104
      selectedKeys={selectedKeys}
105
      onSelect={(keys, info) => {
106
        console.log('Selected:', keys, 'Node:', info.node);
107
        setSelectedKeys(keys);
108
      }}
109
    >
110
      <TreeNode key="0-0" title="Parent Node">
111
        <TreeNode key="0-0-0" title="Child 1" />
112
        <TreeNode key="0-0-1" title="Child 2" />
113
      </TreeNode>
114
    </Tree>
115
  );
116
};
117
```
118

119
### Multiple Selection
120

121
```typescript
122
import React, { useState } from "react";
123
import Tree from "rc-tree";
124

125
const MultipleSelection = () => {
126
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
127

128
  const treeData = [
129
    {
130
      key: '0-0',
131
      title: 'Parent Node',
132
      children: [
133
        { key: '0-0-0', title: 'Child 1' },
134
        { key: '0-0-1', title: 'Child 2' },
135
        { key: '0-0-2', title: 'Child 3' },
136
      ],
137
    },
138
  ];
139

140
  return (
141
    <Tree
142
      prefixCls="rc-tree"
143
      selectable
144
      multiple
145
      treeData={treeData}
146
      selectedKeys={selectedKeys}
147
      onSelect={(keys, info) => {
148
        console.log('Selected keys:', keys);
149
        console.log('Selection info:', info);
150
        setSelectedKeys(keys);
151
      }}
152
      defaultExpandAll
153
    />
154
  );
155
};
156
```
157

158
### Basic Checkbox Tree
159

160
```typescript
161
import React, { useState } from "react";
162
import Tree from "rc-tree";
163

164
const BasicCheckbox = () => {
165
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
166

167
  const treeData = [
168
    {
169
      key: '0-0',
170
      title: 'All Items',
171
      children: [
172
        { key: '0-0-0', title: 'Item 1' },
173
        { key: '0-0-1', title: 'Item 2' },
174
        { key: '0-0-2', title: 'Item 3' },
175
      ],
176
    },
177
  ];
178

179
  return (
180
    <Tree
181
      prefixCls="rc-tree"
182
      checkable
183
      treeData={treeData}
184
      checkedKeys={checkedKeys}
185
      onCheck={(checked, info) => {
186
        console.log('Checked:', checked);
187
        console.log('Check info:', info);
188
        
189
        // Handle both array and object formats
190
        const keys = Array.isArray(checked) ? checked : checked.checked;
191
        setCheckedKeys(keys);
192
      }}
193
      defaultExpandAll
194
    />
195
  );
196
};
197
```
198

199
### Strict Checking Mode
200

201
```typescript
202
import React, { useState } from "react";
203
import Tree from "rc-tree";
204

205
const StrictCheckbox = () => {
206
  const [checkedKeys, setCheckedKeys] = useState<{
207
    checked: string[];
208
    halfChecked: string[];
209
  }>({
210
    checked: [],
211
    halfChecked: [],
212
  });
213

214
  const treeData = [
215
    {
216
      key: '0-0',
217
      title: 'Parent (independent)',
218
      children: [
219
        { key: '0-0-0', title: 'Child 1 (independent)' },
220
        { key: '0-0-1', title: 'Child 2 (independent)' },
221
      ],
222
    },
223
  ];
224

225
  return (
226
    <Tree
227
      prefixCls="rc-tree"
228
      checkable
229
      checkStrictly // Independent checking
230
      treeData={treeData}
231
      checkedKeys={checkedKeys}
232
      onCheck={(checked, info) => {
233
        console.log('Strict checked:', checked);
234
        console.log('Check info:', info);
235
        
236
        // In strict mode, checked is always an object
237
        const keys = checked as { checked: string[]; halfChecked: string[] };
238
        setCheckedKeys(keys);
239
      }}
240
      defaultExpandAll
241
    />
242
  );
243
};
244
```
245

246
### Custom Checkbox Rendering
247

248
```typescript
249
import React, { useState } from "react";
250
import Tree from "rc-tree";
251

252
const CustomCheckbox = () => {
253
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
254

255
  const customCheckbox = (
256
    <span style={{ 
257
      display: 'inline-block', 
258
      width: 16, 
259
      height: 16, 
260
      background: '#f0f0f0', 
261
      border: '1px solid #ccc',
262
      borderRadius: 2,
263
    }}>
264
      ✓
265
    </span>
266
  );
267

268
  const treeData = [
269
    {
270
      key: '0-0',
271
      title: 'Custom Checkbox Parent',
272
      children: [
273
        { key: '0-0-0', title: 'Custom Child 1' },
274
        { key: '0-0-1', title: 'Custom Child 2' },
275
      ],
276
    },
277
  ];
278

279
  return (
280
    <Tree
281
      prefixCls="rc-tree"
282
      checkable={customCheckbox}
283
      treeData={treeData}
284
      checkedKeys={checkedKeys}
285
      onCheck={(checked) => {
286
        const keys = Array.isArray(checked) ? checked : checked.checked;
287
        setCheckedKeys(keys);
288
      }}
289
      defaultExpandAll
290
    />
291
  );
292
};
293
```
294

295
### Mixed Selection and Checking
296

297
```typescript
298
import React, { useState } from "react";
299
import Tree from "rc-tree";
300

301
const MixedSelectionChecking = () => {
302
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
303
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
304

305
  const treeData = [
306
    {
307
      key: '0-0',
308
      title: 'Documents',
309
      children: [
310
        { key: '0-0-0', title: 'Important.pdf' },
311
        { key: '0-0-1', title: 'Report.docx' },
312
        { key: '0-0-2', title: 'Archive',
313
          children: [
314
            { key: '0-0-2-0', title: 'Old File 1.txt' },
315
            { key: '0-0-2-1', title: 'Old File 2.txt' },
316
          ],
317
        },
318
      ],
319
    },
320
  ];
321

322
  return (
323
    <div>
324
      <h3>File Browser (Select to view, Check to process)</h3>
325
      <Tree
326
        prefixCls="rc-tree"
327
        selectable
328
        multiple
329
        checkable
330
        treeData={treeData}
331
        selectedKeys={selectedKeys}
332
        checkedKeys={checkedKeys}
333
        onSelect={(keys, info) => {
334
          console.log('Viewing files:', keys);
335
          setSelectedKeys(keys);
336
        }}
337
        onCheck={(checked, info) => {
338
          console.log('Files selected for processing:', checked);
339
          const keys = Array.isArray(checked) ? checked : checked.checked;
340
          setCheckedKeys(keys);
341
        }}
342
        defaultExpandAll
343
      />
344
      
345
      <div style={{ marginTop: 16 }}>
346
        <p>Currently viewing: {selectedKeys.join(', ') || 'None'}</p>
347
        <p>Selected for processing: {checkedKeys.join(', ') || 'None'}</p>
348
      </div>
349
    </div>
350
  );
351
};
352
```
353

354
## Advanced Selection Features
355

356
### Node-Level Selection Control
357

358
```typescript { .api }
359
/**
360
 * Per-node selection configuration
361
 */
362
interface NodeSelectionConfig {
363
  /** Whether this specific node can be selected */
364
  selectable?: boolean;
365
  /** Whether this specific node is disabled */
366
  disabled?: boolean;
367
}
368
```
369

370
### Custom Selection Logic
371

372
```typescript
373
import React, { useState } from "react";
374
import Tree from "rc-tree";
375

376
const CustomSelectionLogic = () => {
377
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
378

379
  const treeData = [
380
    {
381
      key: '0-0',
382
      title: 'Folders (selectable)',
383
      selectable: true,
384
      children: [
385
        { key: '0-0-0', title: 'Files (not selectable)', selectable: false },
386
        { key: '0-0-1', title: 'Another File', selectable: false },
387
      ],
388
    },
389
    {
390
      key: '0-1',
391
      title: 'Disabled Folder',
392
      disabled: true,
393
      children: [
394
        { key: '0-1-0', title: 'Disabled Child', disabled: true },
395
      ],
396
    },
397
  ];
398

399
  return (
400
    <Tree
401
      prefixCls="rc-tree"
402
      selectable
403
      multiple
404
      treeData={treeData}
405
      selectedKeys={selectedKeys}
406
      onSelect={(keys, info) => {
407
        console.log('Custom selection:', keys, info);
408
        setSelectedKeys(keys);
409
      }}
410
      defaultExpandAll
411
    />
412
  );
413
};
414
```
415

416
## Advanced Checkbox Features
417

418
### Node-Level Checkbox Control
419

420
```typescript { .api }
421
/**
422
 * Per-node checkbox configuration
423
 */
424
interface NodeCheckboxConfig {
425
  /** Whether this specific node shows a checkbox */
426
  checkable?: boolean;
427
  /** Whether only this node's checkbox is disabled */
428
  disableCheckbox?: boolean;
429
}
430
```
431

432
### Conditional Checkbox Logic
433

434
```typescript
435
import React, { useState } from "react";
436
import Tree from "rc-tree";
437

438
const ConditionalCheckbox = () => {
439
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
440

441
  const treeData = [
442
    {
443
      key: '0-0',
444
      title: 'Project Root (checkable)',
445
      children: [
446
        { 
447
          key: '0-0-0', 
448
          title: 'Source Files (checkable)',
449
          children: [
450
            { key: '0-0-0-0', title: 'main.js' },
451
            { key: '0-0-0-1', title: 'utils.js' },
452
          ],
453
        },
454
        { 
455
          key: '0-0-1', 
456
          title: 'Config (checkbox disabled)', 
457
          disableCheckbox: true,
458
          children: [
459
            { key: '0-0-1-0', title: 'package.json', disableCheckbox: true },
460
          ],
461
        },
462
        { 
463
          key: '0-0-2', 
464
          title: 'Logs (not checkable)', 
465
          checkable: false,
466
          children: [
467
            { key: '0-0-2-0', title: 'error.log', checkable: false },
468
          ],
469
        },
470
      ],
471
    },
472
  ];
473

474
  return (
475
    <Tree
476
      prefixCls="rc-tree"
477
      checkable
478
      treeData={treeData}
479
      checkedKeys={checkedKeys}
480
      onCheck={(checked, info) => {
481
        console.log('Conditional check:', checked);
482
        const keys = Array.isArray(checked) ? checked : checked.checked;
483
        setCheckedKeys(keys);
484
      }}
485
      defaultExpandAll
486
    />
487
  );
488
};
489
```
490

491
## Event Handling Details
492

493
### Selection Event Information
494

495
```typescript { .api }
496
/**
497
 * Detailed information provided in selection events
498
 */
499
interface SelectionEventInfo<TreeDataType extends BasicDataNode = DataNode> {
500
  /** Event type */
501
  event: 'select';
502
  /** Whether the node was selected (true) or deselected (false) */
503
  selected: boolean;
504
  /** The node that was selected/deselected */
505
  node: EventDataNode<TreeDataType>;
506
  /** Array of all selected node data */
507
  selectedNodes: TreeDataType[];
508
  /** Native mouse event that triggered the selection */
509
  nativeEvent: MouseEvent;
510
}
511
```
512

513
### Checkbox Event Information
514

515
```typescript { .api }
516
/**
517
 * Comprehensive checkbox event details
518
 */
519
interface CheckboxEventInfo<TreeDataType extends BasicDataNode = DataNode> {
520
  /** Event type */
521
  event: 'check';
522
  /** The node that was checked/unchecked */
523
  node: EventDataNode<TreeDataType>;
524
  /** New checked state of the node */
525
  checked: boolean;
526
  /** Native mouse event */
527
  nativeEvent: MouseEvent;
528
  /** Array of all checked node data */
529
  checkedNodes: TreeDataType[];
530
  /** Array of checked nodes with their tree positions */
531
  checkedNodesPositions?: { node: TreeDataType; pos: string }[];
532
  /** Keys of nodes in half-checked (indeterminate) state */
533
  halfCheckedKeys?: Key[];
534
}
535
```