Checkbox Tree
Дерево с чекбоксами: каскад, частичная отметка, клавиатура. Бесплатно, MIT · Формы и ввод › Выбор из списка
Установка
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)
Похожие компоненты
- Select — Выбор из списка
- Multi Select — Множественный выбор
- Combobox — Поиск и выбор
- Listbox — Список вариантов на странице: один или несколько, диапазоны с Shift
- Chip Group — Группа чипов с иконками: один или несколько вариантов
- Text Input — Текстовые поля
- Textarea — Многострочный ввод
- Search Input — Поисковая строка
- Mentions Input — Текст с @упоминаниями и #тегами, асинхронные подсказки
- Tags Input — Ввод тегов
- Checkbox — Флажки
- Checkbox Group — Флажки с общей подписью, подсказкой, ошибкой и обязательностью
Назад: Chip Group · Далее: Checkbox · Весь раздел «Формы и ввод»