Cascader

Forms 2

About

A multi-level select for picking one path through a hierarchy (like country → region → city) using side-by-side columns instead of a nested dropdown tree.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cascader to your project and fits it to your theme.

Code

How Cascader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Cascader, type CascaderOption } from "@/components/ui/cascader";

const REGIONS: CascaderOption[] = [
  {
    value: "eu",
    label: "Europe",
    children: [
      {
        value: "de",
        label: "Germany",
        children: [
          { value: "ber", label: "Berlin" },
          { value: "muc", label: "Munich" },
        ],
      },
      {
        value: "fr",
        label: "France",
        children: [
          { value: "par", label: "Paris" },
          { value: "lyo", label: "Lyon" },
        ],
      },
      {
        value: "pl",
        label: "Poland",
        children: [
          { value: "waw", label: "Warsaw" },
          { value: "krk", label: "Kraków" },
        ],
      },
    ],
  },
  {
    value: "na",
    label: "North America",
    children: [
      {
        value: "us",
        label: "United States",
        children: [
          { value: "nyc", label: "New York" },
          { value: "sfo", label: "San Francisco" },
        ],
      },
      {
        value: "ca",
        label: "Canada",
        children: [
          { value: "yyz", label: "Toronto" },
          { value: "yvr", label: "Vancouver" },
        ],
      },
    ],
  },
  {
    value: "apac",
    label: "Asia Pacific",
    children: [
      {
        value: "jp",
        label: "Japan",
        children: [{ value: "tyo", label: "Tokyo" }],
      },
      {
        value: "sg",
        label: "Singapore",
        children: [{ value: "sin", label: "Singapore" }],
      },
      {
        value: "au",
        label: "Australia",
        children: [{ value: "syd", label: "Sydney" }],
      },
    ],
  },
];

export default function Demo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-10 text-foreground">
      <Cascader
        className="w-64"
        options={REGIONS}
        defaultValue={["eu", "de", "ber"]}
        label="Region"
      />
    </div>
  );
}