Lumeo

Cascader

A multi-level dropdown for selecting hierarchical data like categories or locations.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Cascader />

When to Use

  • Hierarchical selection like country, state, and city pickers
  • Category drill-down for product catalogs or file systems
  • Location pickers with multi-level geography data
  • Any nested data structure where users select a path from root to leaf

API Reference

Cascader

Property Type Default Description
Options List<CascaderOption>? — Hierarchical options tree.
Value List<string>? — Selected value path (root to leaf).
Clearable bool false Show clear button.
Placeholder string? "Select..." Placeholder text.
Disabled bool false Disable the cascader.
ShowSearch bool false Show a search input to filter options.
ValueChanged EventCallback<List<string>> — Callback for two-way binding when the selected path changes.
Required bool false Marks the field as required. Syncs with a parent FormField.
Invalid bool false Applies error styling. Syncs with a parent FormField.
ErrorText string? null Error message displayed below the field when Invalid is true.
HelperText string? null Helper text shown below the field when not invalid.
Label string? null Label rendered above the field (standalone, without FormField).
Name string? null HTML name attribute for form submission.
FormField FormField.FormFieldContext? null Cascaded context from a parent FormField; wires label, validation, and required state automatically.

Related Components

  • Select — Single-level dropdown for flat option lists
  • Combobox — Searchable dropdown for flat option lists with filtering
  • Breadcrumb — Display the selected hierarchical path as a breadcrumb trail