Checkbox Tree

Checkbox tree: cascading, indeterminate state, keyboard. Free, MIT · Forms and input › Selects

Installation

npx valyro-cli@latest add checkbox-tree

npx shadcn@latest add https://valyro.xyz/r/checkbox-tree.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { CheckboxTree } from 'valyro-ui';

Prop	Type	Default
`nodes`	`CheckboxTreeNode[]`		The tree. Or compose it as children: `CheckboxTree.Item` elements, nested for branches.
`children`	`ReactNode`		The compound form instead of `nodes`: `CheckboxTree.Item` elements.
`value`	`string[]`		Ids of the checked leaves (controlled); parents show checked, mixed or unchecked from them.
`defaultValue`	`string[]`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string[]) => void`		Called with the new `value` when it changes.
`expanded`	`string[]`		Ids of the expanded parents (controlled).
`defaultExpanded`	`string[]`		Initial `expanded` when uncontrolled.
`onExpandedChange`	`(expanded: string[]) => void`		Called with the new `expanded` when it changes.
`guides`	`boolean`	`true`	Connector lines from each parent to its children. Default true.
`size`	`'sm' \| 'md'`	`'md'`	Row height. Default `md`.

CheckboxTree.Item (CheckboxTreeItem)