A JavaScript component that transforms a select element into a checkbox tree.
npm install paper-checkbox-treeThe 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.
* 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.
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
To initialize the checkbox tree, either add the class pct-tree to your select element:
`html
`
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);
`
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",
}
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
});
If there are no
`js`
new CheckboxTree(selectElement, {
groupAllOptions: true,
groupAllLabel: "All Options",
});
This will create a group named "All Options" containing all the options in the
You can also specify the groupAllOptions and groupAllLabel options using data data-pct-group-all-options
attribute :
This will set groupAllOptions to true and use "All options" as the label for the group.data-pct-group-all-options
If you don't provide a value for , it will default to true,
and the default label "All" will be used:
`html``