cascader — a chain of selects, natively

Cascader is the cascade selector as a chain-of-selects: level 0 lists options, each further level lists the children of the previous pick, and the chain stops growing at the first leaf-less pick. The parts are one hidden jx-form-field bridge (a joined path is not a single native control's value, so the payload rides the bridge), a labelled role="group" root, and the wrapping chain of native <select> elements.

The value law is the honest-path law: a complete path — every level picked and the last pick a leaf — joins with separator (default '/') and submits under name; a partial path submits '', never a half-truth in FormData (the input-otp law). Picking at level N truncates everything deeper, then appends. disabled blocks the whole chain; an option may disable itself at any level; form reset clears the path.

All eight universal axes resolve on the root and broadcast downward — the shells' fixed paint reads none of the carriers directly (the axis table below names each one's honesty). For the axis grammar itself, see the universal props concept page.

Reading the table: Property is the axis, Type is the real carrier it stamps on the root here, Default is the lane default — the named steps, number unit, and consumption on this family are in each description.

Deviations, cited: the eight-axis adoption itself is the census row — cascader is one of the 16 native-collision families of batch A (LANDED 6bb88ae0), which gave it its first-ever CascaderDefaults.resolve wiring: all eight lanes declare the no-own slot contract, and the root stamps carriers for every resolved lane (openspec/changes/explicit-props/research/migration-census.md). The §1 native-collision rule: the family destructures all eight axis names, so the native <select> elements never receive them as attributes — HTML's own select size attribute (multiple-rows count) has no passthrough to collide with; the family renders no multi-select and spreads no rest. No §13 renames apply — options, value, separator, label are family props, not axis names — and no family-local prop shadows an axis name, so the generated table needs no extra lane.

<!-- every lane resolves on the root and broadcasts downward;
     the shells' paint is fixed — the table names each axis's honesty -->
<Cascader {options} label="ambient chain" />
<Cascader {options} label="compact chain" density="small" />
<Cascader {options} label="px size stamp" size={24} />

<!-- theme: .dark stamps the root; focus a select — the ring follows
     dark's primary, the shell face stays site-themed -->
<Cascader {options} label="dark island" theme="dark" />

<!-- query(): SSR paints the base rung (data-density="sm"); at the lg
     viewport rung (≥64rem) the root's rung attribute steps to lg.
     The explicit generics pin the case AND the base to the lane (the
     bare form infers QueryResult<string> — a type error). -->
<Cascader {options} label="responsive chain" density={query<{ lg: DensityLane }, DensityLane>({ lg: 'large' }, 'small')} />

<!-- every lane resolves on the root and broadcasts downward;
     the shells' paint is fixed — the table names each axis's honesty -->
<Cascader {options} label="ambient chain" />
<Cascader {options} label="compact chain" density="small" />
<Cascader {options} label="px size stamp" size={24} />

<!-- theme: .dark stamps the root; focus a select — the ring follows
     dark's primary, the shell face stays site-themed -->
<Cascader {options} label="dark island" theme="dark" />

<!-- query(): SSR paints the base rung (data-density="sm"); at the lg
     viewport rung (≥64rem) the root's rung attribute steps to lg.
     The explicit generics pin the case AND the base to the lane (the
     bare form infers QueryResult<string> — a type error). -->
<Cascader {options} label="responsive chain" density={query<{ lg: DensityLane }, DensityLane>({ lg: 'large' }, 'small')} />