Cascader

A hierarchical dropdown component that enables users to navigate through nested option structures and select values from multi-level menus. Perfect for complex data selection scenarios.

Import

import { Cascader } from "@sparrowengg/twigs-react";

Usage

 <Cascader
    data={data}
    placeholder="Select location"
    value={value}
    onChange={(val) => setValue(val)}
 />

Data Handling

We have stored the test-data seperately for the easy accessibility, all the example will use the same data.

Examples

Cascader features

Props

Prop	Type	Default
`data`	`CascaderOption[]`	-
`value?`	`string \| { label: string; value: string }`	-
`defaultValue?`	`string \| { label: string; value: string }`	-
`onChange?`	`(value: CascaderOption, selectionPath: CascaderItem[]) => void`	-
`label?`	`string`	-
`placeholder?`	`string`	-
`creatable?`	`boolean`	`false`
`cancelButtonText?`	`string`	`'Cancel'`
`chooseButtonText?`	`string`	`'Choose'`
`fetchOptions?`	`(data: { value: string; label: string } & Record<string, any>) => Promise<void \| any>`	-
`fetchSearchOptions?`	`(searchString: string) => Promise<void \| any>`	-
`renderValue?`	`(value: CascaderItem \| null, selectionPath: CascaderItem[]) => ReactNode`	-
`renderValueText?`	`(value: CascaderItem \| null, selectionPath: CascaderItem[]) => ReactNode`	-
`renderBreadCrumb?`	`(data: CascaderItem \| null, selectionPath: CascaderItem[]) => ReactNode`	-
`inputAriaDescription?`	`string`	-
`ariaLiveContent?`	`(data: { breadcrumb: string; label: string; totalItems: any; itemPosition: number; hasOptions: boolean; hasParent: boolean; } \| null) => ReactNode`	-
`searchLoadingIndicator?`	`ReactNode`	`'Loading Results...'`
`popoverPortal?`	`HTMLElement`	-
`css?`	`object`	-

Cascader

Import

Usage

Examples

Cascader features

Props

Cascader

On this page