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.
"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>
);
}