<.dm_cascader
  id="cascader-single-default"
  options={[%{label: "Asia", value: "asia", children: [%{label: "China", value: "cn", children: [%{label: "Beijing", value: "bj"}, %{label: "Shanghai", value: "sh"}]}, %{label: "Japan", value: "jp"}]}, %{label: "Europe", value: "eu", children: [%{label: "UK", value: "uk"}, %{label: "Germany", value: "de"}]}]}
  placeholder="Select location..."
 />

<.dm_cascader
  id="cascader-single-with-path"
  options={[%{label: "Asia", value: "asia", children: [%{label: "China", value: "cn", children: [%{label: "Beijing", value: "bj"}, %{label: "Shanghai", value: "sh"}]}]}]}
  selected_path={["asia", "cn", "bj"]}
 />

<.dm_cascader
  id="cascader-single-open-panels"
  open
  options={[%{label: "Asia", value: "asia", children: [%{label: "China", value: "cn", children: [%{label: "Beijing", value: "bj"}]}, %{label: "Japan", value: "jp"}]}, %{label: "Europe", value: "eu"}]}
  clearable
  selected_path={["asia", "cn"]}
 />