When your choices are a hierarchy, a drop-down that opens a tree is the right fit. DropDownTree lets users pick one node and keeps the keyboard behavior of the tree.
Why it helps
- Choose from a hierarchy
- Compact like a drop-down
- Keyboard support of the tree
Where it fits
- Category pickers
- Organization units
- Folders
Example
<DropDownTree TItem="Folder" Items="SampleData.Folders" ChildrenSelector="@(f => f.Children)" ItemText="@(f => f.Name)" @bind-Value="_folder"
Label="Folder" Placeholder="Choose a folder" ExpandAll="true" />
<p>Chosen: @(_folder?.Name ?? "none")</p>
@code {
private Folder? _folder;
}A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.
Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.