<.dm_autocomplete
  id="autocomplete-single-default"
  options={[%{label: "United States", value: "us"}, %{label: "United Kingdom", value: "uk"}, %{label: "Canada", value: "ca"}, %{label: "Germany", value: "de"}, %{label: "France", value: "fr"}]}
  placeholder="Search countries..."
 />

<.dm_autocomplete
  id="autocomplete-single-with-groups"
  options={[%{label: "JavaScript", value: "js", group: "Frontend"}, %{label: "TypeScript", value: "ts", group: "Frontend"}, %{label: "Python", value: "py", group: "Backend"}, %{label: "Elixir", value: "ex", group: "Backend"}, %{label: "Go", value: "go", group: "Backend"}]}
  placeholder="Select language..."
 />

<.dm_autocomplete
  id="autocomplete-single-multiple"
  options={[%{label: "Elixir", value: "elixir"}, %{label: "Phoenix", value: "phoenix"}, %{label: "LiveView", value: "liveview"}]}
  multiple
  placeholder="Select tags..."
  clearable
 />