TreeView
A hierarchical list with expansion, selection, checkboxes, search, lazy loading, and item templates.
Interactive-mode
Divergence from Blok
Blazor-side addition; no equivalent in the Blok design system. TreeView fills a real product need (file/asset trees, navigation hierarchies) that Blok does not currently address. The styling follows Blok tokens so it sits naturally alongside the ported primitives.
Examples
Basic — single select
- src
- App.razor
- Components
- docs
- README.md
Icons and badges
- Inbox2
- Hello
- Welcome aboard
- Sent1
- Re: project update
- Trash
Checkboxes with cascade
- Read
- Posts
- Users
- Write
- Posts
- Users
Checked:
Searchable
- Layout primitives
- Input primitives
- Navigation primitives
Lazy loading on expand
- Folder A
- Folder B
- Folder C (fails)
Custom templates with Expand/Collapse toolbar
- Home/
- Pricing/pricing
- About/about
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| TreeView | Generic hierarchical list. Supply Items plus GetItemValue/GetItemText/GetItemChildren lambdas to project any object graph into the tree; opt into selection, checkboxes, search, and lazy loading via the remaining parameters. |
TreeView
Generic hierarchical list. Supply Items plus GetItemValue/GetItemText/GetItemChildren lambdas to project any object graph into the tree; opt into selection, checkboxes, search, and lazy loading via the remaining parameters.
| Property | Type | Required | Description |
|---|---|---|---|
| TItem | type parameter | Item type rendered by the tree. Declared inline (e.g. TItem="Node"). | |
| Items | IEnumerable<TItem> | Root-level items. | |
| GetItemValue | Func<TItem, string> | Returns the unique string identifier for an item; used for selection, expansion, and checked sets. | |
| GetItemText | Func<TItem, string>? | Returns the display text. Falls back to item.ToString() when null. | |
| GetItemChildren | Func<TItem, IEnumerable<TItem>?>? | Returns an item's children. Null or empty means leaf. | |
| GetItemHasChildren | Func<TItem, bool>? | Overrides leaf detection; use with OnLoadChildren to declare expandability before children load. | |
| GetItemDisabled | Func<TItem, bool>? | Per-item disabled check. Default: all items enabled. | |
| GetItemIcon | Func<TItem, string?>? | Per-item IconSvg path rendered before the label. | |
| GetItemBadge | Func<TItem, string?>? | Per-item Badge text shown after the label. Null hides the badge. | |
| ExpandedValues | ISet<string>? | Controlled set of expanded item values. Use with ExpandedValuesChanged for two-way binding. | |
| ExpandedValuesChanged | EventCallback<ISet<string>> | Fires when the expanded set changes. | |
| DefaultExpandAll | bool | Seed every expandable node as open on first render. Default: false. | |
| DefaultExpandedDepth | int? | Seed nodes up to this depth as open on first render. Ignored if DefaultExpandAll is set. | |
| SelectionMode | TreeSelectionMode | Selection behaviour. Default: TreeSelectionMode.None. Other values: Single, Multiple. | |
| SelectedValue | string? | Controlled single selection value. Use with SelectedValueChanged. | |
| SelectedValueChanged | EventCallback<string?> | Fires when the single selection changes. | |
| SelectedValues | ISet<string>? | Controlled multi-select set. Use with SelectedValuesChanged. | |
| SelectedValuesChanged | EventCallback<ISet<string>> | Fires when the multi-select set changes. | |
| OnItemSelected | EventCallback<TItem> | Raised whenever a row is clicked, regardless of SelectionMode. | |
| Checkable | bool | Show a checkbox in front of every row. Default: false. | |
| CascadeChecks | bool | Toggling a parent toggles all descendants and folds indeterminate state up. Default: true. | |
| CheckedValues | ISet<string>? | Controlled checked set. Use with CheckedValuesChanged or @bind-CheckedValues. | |
| CheckedValuesChanged | EventCallback<ISet<string>> | Fires when the checked set changes. | |
| OnLoadChildren | Func<TItem, Task<IEnumerable<TItem>>>? | Async children provider. Invoked on first expand for nodes with no eager children; failures render a retry row. | |
| ShowSearch | bool | Show a SearchInput above the tree. Default: false. | |
| SearchPlaceholder | string | Placeholder for the search input. Default: "Search...". | |
| SearchText | string? | Controlled search text. Use with SearchTextChanged. | |
| SearchTextChanged | EventCallback<string?> | Fires when the search text changes. | |
| SearchDebounceMs | int | Debounce window on search input in milliseconds. Default: 200. | |
| NoResultsTemplate | RenderFragment? | Custom content for the empty search state. Falls back to a muted "No matches." line. | |
| ShowIcons | bool | Globally suppresses per-item icons when false. Default: true. | |
| EnableRowHover | bool | Apply the hover highlight on rows. Default: true. | |
| ShowConnectorLines | bool | Draw vertical guide lines between parent and child rows. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the outer container. | |
| AriaLabel | string? | Accessible name applied to the role="tree" container. | |
| LabelTemplate | RenderFragment<TItem>? | Custom label renderer; receives the item as context. | |
| ActionsTemplate | RenderFragment<TItem>? | Per-row action slot revealed on hover; receives the item as context. | |
| EmptyTemplate | RenderFragment? | Custom content shown when Items is empty. Falls back to a muted "No items." line. |