Visual Studio Code: How to add checkbox in view container - visual-studio-code

Question

I've been searching non-stop for this on the documentation but haven't been able to find any sort of information. I would like to know how to add checkboxes in my custom view container, similar to the breakpoints' checkboxes.

Answer 1

You can simulate the checkbox by playing with the icon, create a new TreeItem with a different icon when clicked.
Somehow they have knowledge on where on the TreeItem you click.
Looking with the dev tools, it is an <input type="checkbox"/>.
This means that you can do more with TreeItems than the docs explain.
Looking at the source code the BreakpointView is not implemented with a TreeItemProvider, it extends the ViewPane class and uses some kind of templates to render an item. Beside a checkbox it is also possible to have a combobox (SelectBox class).
I have added a feature request (101175) to extend the vscode API so extension developers can write Views with ViewItems that have additional UI-Elements like the Breakpoint view.

Answer 2

You can do this in the proposed api: treeItemCheckbox in Insiders v1.72 now and since it is a fairly simple new api I suspect it will be released with Stable 1.72.
You can play with this now, see using the proposed apis.
Instead of extending TreeItem you will extend TreeItem2 (which extends TreeItem) if you want to use checkboxes. Here is some sample code I put together:
export class TreeTab extends vscode.TreeItem2 {
...
if (tab.isActive) {
this.iconPath = new vscode.ThemeIcon("arrow-small-right", new vscode.ThemeColor("tab.unfocusedActiveBackground"));
this.checkboxState = vscode.TreeItemCheckboxState.Checked;
// this.checkboxState = {state: vscode.TreeItemCheckboxState.Checked, tooltip: "my nifty checkbox tooltip"};
}
...
and elsewhere in your code if you want to detect when that checkbox is clicked/unclicked:
// use your TreeView variable instead of 'tabView'
// from this.tabView = vscode.window.createTreeView(...);
const checkBoxListener = this.tabView.onDidChangeCheckboxState(async event => {
// event = {item: Array(n)}, which TreeItem's checkbox was clicked and its state after clicking:0/1 = on/off
console.log(event);
});