Cascader-Shadcn

A cascading dropdown menu component for selecting hierarchical data like locations, categories, or organizational structures.

Inspired by the Cascader components from Ant Design and React Suite

Select category

Installation

CLIManual

bash

npx shadcn@latest add https://cascader-shadcn.surge.sh/r/cascader.json

Usage

Example.jsx

import { Cascader } from "@/components/ui/cascader" const options = [ { value: "usa", label: "USA", children: [ { value: "new_york", label: "New York", children: [ { value: "statue_of_liberty", label: "Statue of Liberty" }, ], }, ], }, ] export function MyComponent() { return ( <Cascader options={options} onChange={(value, selectedOptions) => { console.log(value, selectedOptions) }} placeholder="Select location" /> ) }

Examples

Basic

A simple cascader with default settings.

PreviewCode

Please select

Default Value

Set an initial value with defaultValue prop.

PreviewCode

USA / New York / Statue of Liberty

Controlled

Control the selected value externally with value and onChange props.

PreviewCode

Please select

Selected: None

Hover to Expand

Expand child options on hover instead of click.

PreviewCode

Hover to expand

Custom Labels with Icons

Use React components as labels with icons. Use textLabel for the display value.

PreviewCode

Select with icons

Custom Display

Customize how the selected value is displayed using displayRender.

PreviewCode

Custom display

Disabled Options

Disable specific options in the cascader.

PreviewCode

Some options disabled

Disabled

Disable the entire cascader component.

PreviewCode

USA / New York / Statue of Liberty

Without Clear Button

Hide the clear button by setting allowClear to false.

PreviewCode

No clear button

API Reference

CascaderOption

PropertyTypeDescriptionvaluestringUnique identifier for the optionlabelReact.ReactNodeDisplay content for the option (string or component)textLabelstringString label for display rendering. Falls back to value if not provided.disabledbooleanWhether the option is disabledchildrenCascaderOption[]Nested child options

Cascader Props

PropTypeDefaultDescriptionoptionsCascaderOption[]-The data options for the cascadervaluestring[]-Controlled selected valuedefaultValuestring[]-Initial selected valueonChange(value, options) => void-Callback when selection changesplaceholderstring"Please select"Placeholder textdisabledbooleanfalseDisable the cascaderallowClearbooleantrueShow clear buttonexpandTrigger"click" | "hover""click"How to expand child optionsdisplayRender(labels, options) => ReactNode-Custom render for displayclassNamestring-Custom class for triggerpopupClassNamestring-Custom class for dropdown