Skip to content
LIST SELECTION · FREE

Cascader

Let users choose from a hierarchy, one level at a time.

Pick one value from a hierarchy, one level at a time: a column of choices opens a column of sub choices.

Why it helps

  • Step-by-step choice
  • Familiar column layout
  • Good for deep hierarchies

Where it fits

  • Region, city and district
  • Category and subcategory
  • Product families
Cascader control in a RayCraft page

Example

<Cascader Label="Location" @bind-Value="_place" Nodes="_nodes" Placeholder="Choose a city" />
<p>Chosen: @(_place ?? "none")</p>

@code {
    private string? _place;

    private readonly CascaderNode[] _nodes =
    [
        new("bg", "Bulgaria",
            new CascaderNode("bg-sof", "Sofia", new CascaderNode("sofia", "Sofia"), new CascaderNode("pernik", "Pernik")),
            new CascaderNode("bg-plv", "Plovdiv", new CascaderNode("plovdiv", "Plovdiv"), new CascaderNode("asenovgrad", "Asenovgrad")),
            new CascaderNode("bg-var", "Varna", new CascaderNode("varna", "Varna"))),
        new("de", "Germany",
            new CascaderNode("de-be", "Berlin", new CascaderNode("berlin", "Berlin")),
            new CascaderNode("de-by", "Bavaria", new CascaderNode("munich", "Munich"), new CascaderNode("nuremberg", "Nuremberg"))),
        new("gr", "Greece",
            new CascaderNode("athens", "Athens"),
            new CascaderNode("thessaloniki", "Thessaloniki"))
    ];
}

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.

All controls ยท Documentation