paper-checkbox-tree

!Version
!License

The paper-checkbox-tree library transforms a standard HTML element
into an interactive tree of checkboxes. This is particularly useful for forms requiring
a hierarchical structure of selectable options.

!image

Demo

Features

* Converts

elements with nested and elements into
a tree structure with checkboxes.
* Supports custom CSS class names for flexible styling.
* Allows group selection and individual option selection.
* Provides keyboard navigation and accessibility features.

Installation

You can include the library directly in your HTML file from the CDN:

``html


`

Alternatively, you can install the library via npm:

`bash
npm install paper-checkbox-tree
`

Usage

To initialize the checkbox tree, either add the class pct-tree to your select element:

`html


user | Can add user
user | Can change user
user | Can delete user
user | Can view user

`

Or, you can initialize it programmatically by instantiating a CheckboxTree object:

`js
import CheckboxTree from "paper-checkbox-tree";
import "paper-checkbox-tree/dist/style.css";

// Example usage:
const selectElement = document.getElementById("my-select-element");
const checkboxTree = new CheckboxTree(selectElement);
`

Configuration

You can customize the default CSS class names and behavior by passing an options object
when initializing the CheckboxTree. Here is the default configuration:

`js
{
groupAllOptions: false,
groupAllLabel: "All",
rootClassName: "pct-tree",
innerClassName: "pct-tree__inner",
groupClassName: "pct-group",
groupHeaderClassName: "pct-group__header",
groupLabelClassName: "pct-group__label",
groupTextClassName: "pct-group__text",
optionClassName: "pct-option",
optionLabelClassName: "pct-option__label",
optionInputClassName: "pct-option__input",
optionTextClassName: "pct-option__text",
checkboxCheckedClassName: "pct-checkbox--checked",
checkboxIndeterminateClassName: "pct-checkbox--partial",
checkboxDisabledClassName: "pct-checkbox--disabled",
}
`

$3

You can customize the CSS class names to match your styling preferences:

`js
new CheckboxTree(selectElement, {
rootClassName: "custom-tree",
optionClassName: "custom-option",
// other custom class names
});
`

$3

If there are no elements present in the , enabling the
groupAllOptions option will group all options under a single group. You can specify
the label for this group using the groupAllLabel option:

`js
new CheckboxTree(selectElement, {
groupAllOptions: true,
groupAllLabel: "All Options",
});
`

This will create a group named "All Options" containing all the options in the


element. If elements are present, the "All Options" group will not be created.

$3

You can also specify the groupAllOptions and groupAllLabel options using data
attribute data-pct-group-all-options:

This will set groupAllOptions to true and use "All options" as the label for the group.
If you don't provide a value for data-pct-group-all-options, it will default to true,
and the default label "All" will be used:

`html



``