Cascader

import { Component } from '@angular/core';
import { WrCascader } from 'ngwr/cascader';

@Component({ imports: [WrCascader] })
export class MyComponent {}

<wr-cascader [options]="locations" [(value)]="picked" placeholder="Pick a location" />

locations: WrCascaderOption[] = [
  {
    value: 'us', label: 'United States', children: [
      { value: 'ca', label: 'California', children: [
        { value: 'la', label: 'Los Angeles' },
        { value: 'sf', label: 'San Francisco' },
      ] },
    ],
  },
  // ...
];

Value: [ "us", "ca", "sf" ]

<wr-cascader
  [options]="locations"
  [(value)]="picked"
  changeOnSelect
  placeholder="Pick any level"
/>

Value: []

Key	Does
ArrowDownArrowUp	On the trigger, opens the panel. In a column, moves to the next or previous option.
HomeEnd	Moves to the first or last option of the column.
ArrowRight	Opens a branch and moves into its column. Mirrored under RTL.
ArrowLeft	Moves back to the option the column belongs to. Mirrored under RTL.
A letter	Moves to the next option in the column that starts with what you typed.
EnterSpace	Picks the option. A leaf commits the path and closes the panel.
Escape	Closes the panel and returns focus to the trigger.
Backspace	On the closed trigger, clears the path.

Name	Description	Type	Default
`clearLabel`	Accessible name. Falls back to `select.clearSelection`, then `'Clear selection'`.	`string \| null`	`null`
`options`required	Root-level options. Each may have `children` for deeper levels.	`readonly WrCascaderOption<T>[]`	—
`placeholder`	Placeholder shown when no path is selected.	`string`	`''`
`ariaLabel`	Accessible name of the trigger. Falls back to the placeholder, then to `select.label` — a `role="combobox"` with nothing selected and no placeholder otherwise has no name at all.	`string \| null`	`null`
`disabled`	Disable the cascader. Bound automatically from the field's disabled state when used with `[formField]`.	`boolean`	`false`
`readonly`	Refuse changes while the trigger stays focusable and the path still submits. Bound automatically from the field's readonly state when used with `[formField]`. The panel is where every edit happens, so a read-only cascader simply does not open — there is nothing to browse that is not already on the trigger — and the clear button goes away with it. Mirrored as `aria-readonly`, which role `combobox` supports.	`boolean`	`false`
`size`	Control size — shares the `--wr-control-*` contract.	`WrCascaderSize`	`'md'`
`clearable`	Show a clear-all (×) button on the trigger when a path is selected.	`boolean`	`true`
`changeOnSelect`	Allow selecting non-leaf (parent) nodes. When `false`, only leaves (nodes without children) commit a selection.	`boolean`	`false`
`separator`	Separator between labels in the trigger display.	`string`	`'/'`
`panelClass`	Extra CSS classes for the column panel's overlay pane. The pane is appended to the overlay container, not to this component, so nothing in the consumer's own template encloses it and no descendant rule written around the trigger can reach it. This input is the only per-instance handle on it. A space-separated string works as well as an array.	`WrClassInput`	`null`
`value`	Committed selection path (full array from root to leaf). Bound by `[formField]`, or two-way via `[(value)]`.	`unknown`	`[]`
`(touch)`	Emitted on blur / commit so a bound field can mark itself touched.	`void`	—

Name	Description	Type	Default
`WrCascaderOption<T>`	`{ value: T, label: string, disabled?: boolean, children?: WrCascaderOption<T>[] }`. A node without `children` is a leaf.	`interface`	`—`

Variable	Default	Declared on
`--wr-cascader-bg`	`var(--wr-color-surface)`	`.wr-cascader` +1 variant override
`--wr-cascader-border`	`var(--wr-border-base)`	`.wr-cascader`
`--wr-cascader-clear-radius`	`var(--wr-border-radius-pill)`	`.wr-cascader`
`--wr-cascader-col-border`	`var(--wr-border-base)`	`.wr-cascader-panel`
`--wr-cascader-col-gap`	`var(--wr-space-xs)`	`.wr-cascader-panel`
`--wr-cascader-col-padding`	`var(--wr-space-xs)`	`.wr-cascader-panel`
`--wr-cascader-col-width`	`12rem`	`.wr-cascader-panel`
`--wr-cascader-color`	`var(--wr-color-on-surface)`	`.wr-cascader` +1 variant override
`--wr-cascader-font-family`	`var(--wr-font-family-base)`	`.wr-cascader`
`--wr-cascader-font-size`	`var(--wr-control-font-size-md)`	`.wr-cascader` +2 variant overrides
`--wr-cascader-gap`	`var(--wr-space-sm)`	`.wr-cascader`
`--wr-cascader-line-height`	`var(--wr-control-line-height-md)`	`.wr-cascader` +2 variant overrides
`--wr-cascader-max-height`	`16rem`	`.wr-cascader-panel`
`--wr-cascader-min-width`	`12rem`	`.wr-cascader`
`--wr-cascader-opt-active-font-weight`	`var(--wr-font-weight-medium)`	`.wr-cascader-panel`
`--wr-cascader-opt-font`	`var(--wr-control-font-size-md)`	`.wr-cascader-panel` +2 variant overrides
`--wr-cascader-opt-gap`	`var(--wr-space-sm)`	`.wr-cascader-panel`
`--wr-cascader-opt-px`	`var(--wr-space-md)`	`.wr-cascader-panel`
`--wr-cascader-opt-py`	`var(--wr-space-sm)`	`.wr-cascader-panel` +3 variant overrides
`--wr-cascader-opt-radius`	`var(--wr-border-radius-sm)`	`.wr-cascader-panel`
`--wr-cascader-overlay-padding-top`	`var(--wr-space-xs)`	`.wr-cascader-overlay`
`--wr-cascader-padding-x`	`var(--wr-control-padding-x-md)`	`.wr-cascader` +2 variant overrides
`--wr-cascader-padding-y`	`var(--wr-control-padding-y-md)`	`.wr-cascader` +2 variant overrides
`--wr-cascader-panel-border`	`var(--wr-border-base)`	`.wr-cascader-panel`
`--wr-cascader-panel-font-family`	`var(--wr-font-family-base)`	`.wr-cascader-panel`
`--wr-cascader-panel-radius`	`var(--wr-border-radius-base)`	`.wr-cascader-panel`
`--wr-cascader-radius`	`var(--wr-control-radius-md)`	`.wr-cascader` +2 variant overrides

Angular CDK	`overlay`, `portal`
Built on	Form, Overlay

Installation

Basic

changeOnSelect

Keyboard

Width

API

Types

CSS variables

Dependencies

See also