ValyroUI English version

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';

Пропсы

PropTypeDefault
nodesCheckboxTreeNode[]The tree. Or compose it as children: CheckboxTree.Item elements, nested for branches.
childrenReactNodeThe compound form instead of nodes: CheckboxTree.Item elements.
valuestring[]Ids of the checked leaves (controlled); parents show checked, mixed or unchecked from them.
defaultValuestring[]Initial value when uncontrolled.
onValueChange(value: string[]) => voidCalled with the new value when it changes.
expandedstring[]Ids of the expanded parents (controlled).
defaultExpandedstring[]Initial expanded when uncontrolled.
onExpandedChange(expanded: string[]) => voidCalled with the new expanded when it changes.
guidesbooleantrueConnector 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 · Весь раздел «Формы и ввод»