<.dm_multi_select
  id="multi-select-single-default"
  options={[%{label: "Elixir", value: "elixir"}, %{label: "Phoenix", value: "phoenix"}, %{label: "LiveView", value: "liveview"}, %{label: "Ecto", value: "ecto"}]}
  placeholder="Select items..."
 />

<.dm_multi_select
  id="multi-select-single-with-selected"
  options={[%{label: "Elixir", value: "elixir"}, %{label: "Phoenix", value: "phoenix"}, %{label: "LiveView", value: "liveview"}]}
  selected={["elixir", "phoenix"]}
  clearable
  show_counter
 />

<.dm_multi_select
  id="multi-select-single-open-dropdown"
  open
  options={[%{label: "Apple", value: "a", group: "Fruits"}, %{label: "Banana", value: "b", group: "Fruits"}, %{label: "Carrot", value: "c", group: "Vegetables"}]}
  selected={["a"]}
  searchable
  show_actions
 />

<.dm_multi_select id="multi-select-single-states">
  <div class="space-y-4">
    <.dm_multi_select id="ms-error"
      options={[%{value: "a", label: "Error"}]}
      selected={["a"]} error={true} />
    <.dm_multi_select id="ms-disabled"
      options={[%{value: "a", label: "Disabled"}]}
      selected={["a"]} disabled={true} />
    <.dm_multi_select id="ms-loading"
      options={[]} loading={true} placeholder="Loading..." />
  </div>
</.dm_multi_select>