Cascader

Drill through nested levels to pick one value. Top-level items expand a column to the right; picking a leaf shows the joined path on the trigger and stores the leaf value in a hidden input.

Example

Location

<Cascader
  id="location"
  label="Location"
  name="location"
  options={[
    { value: "europe", label: "Europe", children: [
      { value: "berlin", label: "Berlin" },
      { value: "paris", label: "Paris" },
    ] },
    { value: "asia", label: "Asia", children: [
      { value: "tokyo", label: "Tokyo" },
    ] },
  ]}
/>

Preselected path

Headquarters

<Cascader
  id="hq"
  label="Headquarters"
  name="hq"
  options={…}
  value={["asia", "tokyo"]}
/>

Select any level

By default only leaves select (selectAny isfalse): activating a branch expands it. WithselectAny, any node picks its own value instead.

Region

<Cascader
  id="region"
  label="Region"
  name="region"
  options={…}
  selectAny
/>

Error state

Office

Choose an office location.

<Cascader
  id="office"
  label="Office"
  name="office"
  options={…}
  error="Choose an office location."
/>

Props

Prop	Type	Default	Description
`id`	`string`	-	Required. Names Field/panel/message ids (trigger itself carries no id).
`label`	`string`	-	Visible label; kept in the trigger name and panel name.
`name`	`string`	`id`	Hidden-input form name; carries the leaf value.
`options`	`CascadeOption[]` (`{ value; label; disabled?; children? }`)	-	Nested levels; branches expand, leaves select.
`value`	`string[]`	`[]`	Preselected value path; unknown values select nothing.
`selectAny`	`boolean`	`false`	Any node selects; otherwise only leaves select.
`placeholder`	`string`	`"Select …"`	Empty-state trigger text; defaults to the lowercased label.
`hint`	`string`	-	Help text below the trigger.
`error`	`string`	-	Error message; sets `aria-invalid` on the trigger.
`required`	`boolean`	`false`	Marks the label required.
`disabled`	`boolean`	`false`	Non-interactive; trigger cannot open.
`class`	`string`	-	Style passthrough.

Accessibility

Trigger keeps the label in its accessible name, with aria-haspopup="dialog", aria-expanded, aria-controls.
Panel is a dialog named "{label} options" holding one plain list of buttons per level (honest grouping — no fake listbox).
Opening focuses the first top-level item; Up/Down travel a column, Right expands, Left steps back, Enter picks (leaf-only unless selectAny), Escape closes and refocuses the trigger.
Hint and error connect via aria-describedby; error sets aria-invalid="true" on the trigger.
Selection dispatches ink:cascader:change with { value, path }.