Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Cascader

Choose one item at the end of a path, with every level side by side so the way back is always in view. Pointing at an item opens its column; choosing a leaf closes the menu and the field shows the whole path.

Pro
pnpm dlx shadcn@latest add @caliper/cascader

Ship order #8812

Couriers collect from the nearest hub.

Bergen is paused this week.

Installs components/ui/cascader.tsxDepends on @radix-ui/react-popover, lucide-reactMotion none in component source

When to use

Use it for

  • Region › Country › City, Category › Type › Model, Folder › Subfolder.
  • Deep but narrow hierarchies.

Skip it when

  • Choosing many; use the tree select.
  • Flat or searchable lists; use the combobox.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Columns, not a drill
Every level stays visible, which keeps the path readable and reversible.
Narrow screens
The columns scroll sideways so the newest is always in view.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/cascader

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source. It is built from Cascader and cascaderPath.

example.tsx
import { Cascader, cascaderPath } from "@/components/ui/cascader"

The worked example comes with Pro

The 46-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

Cascader

component
PropTypeDefaultDescription
label *string—
options *readonly CascaderOption[]—
value *readonly string[]—The chosen path, root first.
onValueChange *(path: string[]) => void—
placeholderstring"Choose"
separatorstring" / "
classNamestring—

cascaderPath

component

No props of its own; it accepts the native props of its root element.

Accessibility

It exposes listbox and option semantics, with aria-label, aria-selected and aria-disabled kept in step with state.

KeyBehaviour
↓Moves to the next item or value.
↑Moves to the previous item or value.
→Moves to the next item or value.
←Moves to the previous item or value.
EnterActivates the focused control.
SpaceActivates the focused control.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Combobox and multi-select examples