Cascader Component

Hierarchical cascading selection with multi-level navigation, search, and flexible interaction modes.

Basic Cascader

Simple cascading selection with click navigation

Selected: None

With Default Selection

Cascader with pre-selected hierarchical path

Hover Trigger

Expand menus on hover instead of click

Change on Select

Allow selection of intermediate levels, not just leaf nodes

Selected: None

Searchable Cascader

Search across all levels of the hierarchy

Show Last Label Only

Display only the final selected item, not the full path

Custom Path Separator

Use custom separator for path display

API Reference

Props and types for the Cascader component

CascaderProps

optionsCascaderOption[]Hierarchical options
valuestring[]Selected value path
onChangefunctionCallback when value changes
expandTrigger'click' | 'hover'How to expand menus (default: 'click')
changeOnSelectbooleanAllow selecting intermediate levels
showPathbooleanShow full path (default: true)
separatorstringPath separator (default: ' / ')
searchablebooleanEnable search functionality

CascaderOption

valuestringOption value
labelstringDisplay label
childrenCascaderOption[]Child options
disabledbooleanDisable option

Usage Example

import { Cascader, CascaderOption } from '@/components/ui/cascader'

const options: CascaderOption[] = [
  {
    value: 'usa',
    label: 'United States',
    children: [
      {
        value: 'california',
        label: 'California',
        children: [
          { value: 'sf', label: 'San Francisco' },
          { value: 'la', label: 'Los Angeles' },
        ],
      },
    ],
  },
]

const [value, setValue] = useState<string[]>([])

<Cascader
  options={options}
  value={value}
  onChange={setValue}
  placeholder="Select location"
  expandTrigger="click"
  changeOnSelect={false}
  searchable={true}
/>