Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
Components List Tree

List Tree

 Overview API Examples Style Tokens

The Tree List component can be used to navigate among branches and/or leaves in a tree-like structure.

Single selection

The Tree List can be leveraged to let users perform a single selection. You can choose whether to show the Radio buttons at the beginning or at the end of each List Item, and you can initialize the single selection with a prefilled value. Also, the selection controls support a Disabled state: when activated, an information button is displayed in the respective List Item, and you can use it to provide useful details as to why that item is not selectable.

Multiple selection

The Tree List can be leveraged to let users perform a multiple selection. You can choose whether to show the Checkboxes at the beginning or at the end of each List Item, and you can initialize the multiple selection with a prefilled value. Also, the selection controls support a Disabled state: when activated, an information button is displayed in the respective List Item, and you can use it to provide useful details as to why that item is not selectable.

Toggle selection

The Tree List can be leveraged to let users perform a Toggle selection. You can choose whether to show the Toggles at the beginning or at the end of each List Item, and you can initialize the Toggle selection with a prefilled value. Also, the selection controls support a Disabled state: when activated, an information button is displayed in the respective List Item, and you can use it to provide useful details as to why that item is not selectable.

Reordering

A Tree List can allow users to reorder its items.

Previous
List Tablist
Next
Menu