Data Entryduskmoonimplemented7 demos

Cascader

Cascader selects a value from a nested hierarchy without exposing the whole tree at once.

Import@duskmoon-dev/components/cascader

14API sections

51documented props

5behavior scenarios

Key API

allowClearchangeOnSelectcheckablecheckedStrategydefaultOpendefaultValue

Usage

When to use

Use it inside forms, filters, settings, and any workflow that captures user input.
Prefer controlled props when the value must stay synchronized with application state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Controlled and uncontrolled usage

Documents default values, value props, and change callbacks for form integration.

Validation state

Surfaces status, size, disabled, and option data patterns where the component supports them.

Primary API surface

Cascader is most often configured through `allowClear`, `changeOnSelect`, `checkable`, `checkedStrategy`.

Covered behavior

Renders a default value and selects a leaf path

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Cascader from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Cascader } from "@duskmoon-dev/components/cascader";

export function Example() {
  return (<Cascader
  options={[
    {
      label: "Design",
      value: "design",
      children: [{ label: "Components", value: "components" }]
    },
    {
      label: "Engineering",
      value: "engineering",
      children: [{ label: "Release", value: "release" }]
    }
  ]}
  placeholder="Select workflow"
/>);
}

Preview

Renders a default value and selects a leaf path

test-backed

Cascader scenario from the component test coverage: renders a default value and selects a leaf path.

Source

import "@duskmoon-dev/components/styles.css";
import { Cascader } from "@duskmoon-dev/components/cascader";

export function CascaderRendersADefaultValueDemo() {
  return (<Cascader
  options={[
    {
      label: "Design",
      value: "design",
      children: [{ label: "Components", value: "components" }]
    },
    {
      label: "Engineering",
      value: "engineering",
      children: [{ label: "Release", value: "release" }]
    }
  ]}
  placeholder="Select workflow"
/>);
}

Preview

Supports controlled open callbacks and allowClear

test-backed

Cascader scenario from the component test coverage: supports controlled open callbacks and allowclear.

Source

import "@duskmoon-dev/components/styles.css";
import { Cascader } from "@duskmoon-dev/components/cascader";

export function CascaderSupportsControlledOpenCallbacksDemo() {
  return (<Cascader
  options={[
    {
      label: "Design",
      value: "design",
      children: [{ label: "Components", value: "components" }]
    },
    {
      label: "Engineering",
      value: "engineering",
      children: [{ label: "Release", value: "release" }]
    }
  ]}
  placeholder="Select workflow"
/>);
}

Preview

Supports multiple selection and onSelect

test-backed

Cascader scenario from the component test coverage: supports multiple selection and onselect.

Source

import "@duskmoon-dev/components/styles.css";
import { Cascader } from "@duskmoon-dev/components/cascader";

export function CascaderSupportsMultipleSelectionAndDemo() {
  return (<Cascader
  options={[
    {
      label: "Design",
      value: "design",
      children: [{ label: "Components", value: "components" }]
    },
    {
      label: "Engineering",
      value: "engineering",
      children: [{ label: "Release", value: "release" }]
    }
  ]}
  placeholder="Select workflow"
/>);
}

Preview

Supports search, displayRender, and fieldNames

test-backed

Cascader scenario from the component test coverage: supports search, displayrender, and fieldnames.

Source

import "@duskmoon-dev/components/styles.css";
import { Cascader } from "@duskmoon-dev/components/cascader";

export function CascaderSupportsSearchDisplayRenderAndDemo() {
  return (<Cascader
  options={[
    {
      label: "Design",
      value: "design",
      children: [{ label: "Components", value: "components" }]
    },
    {
      label: "Engineering",
      value: "engineering",
      children: [{ label: "Release", value: "release" }]
    }
  ]}
  placeholder="Select workflow"
/>);
}

Preview

Supports loadData markers, disabled state, constants, and Panel

test-backed

Cascader scenario from the component test coverage: supports loaddata markers, disabled state, constants, and panel.

Source

import "@duskmoon-dev/components/styles.css";
import { Cascader } from "@duskmoon-dev/components/cascader";

export function CascaderSupportsLoadDataMarkersDisabledDemo() {
  return (<Cascader
  options={[
    {
      label: "Design",
      value: "design",
      children: [{ label: "Components", value: "components" }]
    },
    {
      label: "Engineering",
      value: "engineering",
      children: [{ label: "Release", value: "release" }]
    }
  ]}
  placeholder="Select workflow"
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Cascader
  options={[
    {
      label: "Design",
      value: "design",
      children: [{ label: "Components", value: "components" }]
    },
    {
      label: "Engineering",
      value: "engineering",
      children: [{ label: "Release", value: "release" }]
    }
  ]}
  placeholder="Select workflow"
/>
</div>

<div data-theme="moonlight">
  <Cascader
  options={[
    {
      label: "Design",
      value: "design",
      children: [{ label: "Components", value: "components" }]
    },
    {
      label: "Engineering",
      value: "engineering",
      children: [{ label: "Release", value: "release" }]
    }
  ]}
  placeholder="Select workflow"
/>
</div>

API

The API reference below lists every parsed exported type or interface for Cascader. Start with `allowClear`, `changeOnSelect`, `checkable`, `checkedStrategy` for common usage.

Types: packages/components/src/components/cascader/Cascader.types.tsScenarios: packages/components/src/components/cascader/Cascader.test.tsx

CascaderPropsinterface extends Omit< ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSelect" >

Prop	Type	Required	Description
`allowClear`	`boolean`	No	allowClear configures Cascader.
`changeOnSelect`	`boolean`	No	changeOnSelect configures Cascader.
`checkable`	`boolean`	No	checkable configures Cascader.
`checkedStrategy`	`CascaderCheckedStrategy`	No	checkedStrategy configures Cascader.
`children`	`ReactNode`	No	children configures Cascader.
`defaultOpen`	`boolean`	No	defaultOpen configures Cascader.
`defaultValue`	`CascaderChangeValue`	No	defaultValue configures Cascader.
`disabled`	`boolean`	No	disabled configures Cascader.
`displayRender`	`(`	No	displayRender configures Cascader.
`labels`	`ReactNode[],`	Yes	labels configures Cascader.
`selectedOptions`	`CascaderOption[],`	No	selectedOptions configures Cascader.
`expandTrigger`	`CascaderExpandTrigger`	No	expandTrigger configures Cascader.
`fieldNames`	`CascaderFieldNames`	No	fieldNames configures Cascader.
`loadData`	`(selectedOptions: CascaderOption[]) => void`	No	loadData configures Cascader.
`multiple`	`boolean`	No	multiple configures Cascader.
`notFoundContent`	`ReactNode`	No	notFoundContent configures Cascader.
`onChange`	`(`	No	onChange configures Cascader.
`value`	`CascaderChangeValue,`	Yes	value configures Cascader.
`selectedOptions`	`CascaderOption[] \| CascaderOption[][],`	No	selectedOptions configures Cascader.
`onDropdownVisibleChange`	`(open: boolean) => void`	No	onDropdownVisibleChange configures Cascader.
`onOpenChange`	`(open: boolean) => void`	No	onOpenChange configures Cascader.
`onSearch`	`(value: string) => void`	No	onSearch configures Cascader.
`onSelect`	`(`	No	onSelect configures Cascader.
`value`	`CascaderSingleValue,`	Yes	value configures Cascader.
`selectedOptions`	`CascaderOption[],`	No	selectedOptions configures Cascader.
`open`	`boolean`	No	open configures Cascader.
`options`	`CascaderOption[]`	No	options configures Cascader.
`placeholder`	`ReactNode`	No	placeholder configures Cascader.
`showSearch`	`boolean \| CascaderSearchConfig`	No	showSearch configures Cascader.
`size`	`CascaderSize`	No	size configures Cascader.
`status`	`CascaderStatus`	No	status configures Cascader.
`value`	`CascaderChangeValue`	No	value configures Cascader.

CascaderOptioninterface

Prop	Type	Required	Description
`label`	`ReactNode`	No	label configures Cascader.
`value`	`CascaderValue`	No	value configures Cascader.
`children`	`CascaderOption[]`	No	children configures Cascader.
`disabled`	`boolean`	No	disabled configures Cascader.
`isLeaf`	`boolean`	No	isLeaf configures Cascader.
`loading`	`boolean`	No	loading configures Cascader.
`className`	`string`	No	className configures Cascader.

CascaderFieldNamesinterface

Prop	Type	Required	Description
`label`	`string`	No	label configures Cascader.
`value`	`string`	No	value configures Cascader.
`children`	`string`	No	children configures Cascader.

CascaderSearchConfiginterface

Prop	Type	Required	Description
`filter`	`(`	No	filter configures Cascader.
`inputValue`	`string,`	Yes	inputValue configures Cascader.
`path`	`CascaderOption[],`	Yes	path configures Cascader.
`names`	`Required<CascaderFieldNames>,`	Yes	names configures Cascader.
`render`	`(`	No	render configures Cascader.
`inputValue`	`string,`	Yes	inputValue configures Cascader.
`path`	`CascaderOption[],`	Yes	path configures Cascader.
`names`	`Required<CascaderFieldNames>,`	Yes	names configures Cascader.
`limit`	`number \| false`	No	limit configures Cascader.

CascaderValuetype

string | number

CascaderSingleValuetype

CascaderValue[]

CascaderMultipleValuetype

CascaderValue[][]

CascaderChangeValuetype

CascaderSingleValue | CascaderMultipleValue

CascaderSizetype

"small" | "middle" | "large"

CascaderStatustype

"error" | "warning"

CascaderExpandTriggertype

"click" | "hover"

CascaderCheckedStrategytype

"SHOW_PARENT" | "SHOW_CHILD"

CascaderPanelPropstype

Omit< CascaderProps, "allowClear" | "defaultOpen" | "open" | "placeholder" >

CascaderComponenttype

ForwardRefExoticComponent< CascaderProps & RefAttributes<HTMLDivElement> > & { Panel: ForwardRefExoticComponent< CascaderPanelProps & RefAttributes<HTMLDivElement> >