Pattern

    <.select
  class="select"
  controlled
  value={@value}
  items={@items}
  on_value_change="value_changed"
>
  <:label>Country</:label>
  <:trigger>
    <.heroicon name="hero-chevron-down" class="icon" />
  </:trigger>
</.select>

  

    def mount(_params, _session, socket) do
  items =
    Corex.List.new([
      %{label: "France", value: "fra"},
      %{label: "Belgium", value: "bel"},
      %{label: "Germany", value: "deu"},
      %{label: "Netherlands", value: "nld"},
      %{label: "Switzerland", value: "che"},
      %{label: "Austria", value: "aut"}
    ])

  {:ok, assign(socket, value: [], items: items)}
end

def handle_event("value_changed", %{"value" => value}, socket) do
  {:noreply, assign(socket, :value, value)}
end

  

    <div class="flex flex-col gap-space w-full max-w-xl">
  <div class="flex flex-wrap gap-space-sm">
    <.action phx-click="add_item" class="button ui-size-sm ui-accent">
      <.heroicon name="hero-plus" /> Add item
    </.action>
    <.action phx-click="reset" class="button ui-size-sm ui-alert">
      Reset
    </.action>
  </div>
  <.select
    class="select"
    items={Corex.List.new(@items)}
    value={@value}
    on_value_change="value_changed"
  >
    <:label>Country</:label>
    <:trigger>
      <.heroicon name="hero-chevron-down" class="icon" />
    </:trigger>
  </.select>
</div>

  

    defmodule MyAppWeb.SelectDynamicDemoLive do
  use MyAppWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    initial = [
      %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
      %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
      %{value: "donec", label: "Donec condimentum ex mi"}
    ]

    {:ok,
     socket
     |> assign(:items, initial)
     |> assign(:value, [])
     |> assign(:next_id, 1)}
  end

  @impl true
  def handle_event("add_item", _params, socket) do
    id = "item-#{socket.assigns.next_id}"
    item = %{value: id, label: "Item #{socket.assigns.next_id}"}

    {:noreply,
     socket
     |> assign(:items, socket.assigns.items ++ [item])
     |> assign(:next_id, socket.assigns.next_id + 1)}
  end

  @impl true
  def handle_event("reset", _params, socket) do
    initial = [
      %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
      %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
      %{value: "donec", label: "Donec condimentum ex mi"}
    ]

    {:noreply,
     socket
     |> assign(:items, initial)
     |> assign(:value, [])
     |> assign(:next_id, 1)
     |> Corex.Select.set_value("patterns-dynamic", [])}
  end

  def handle_event("value_changed", %{"value" => value}, socket) when is_list(value) do
    {:noreply, assign(socket, :value, value)}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <div class="flex flex-col gap-space w-full max-w-xl">
      <div class="flex flex-wrap gap-space-sm">
        <.action phx-click="add_item" class="button ui-size-sm ui-accent">
          <.heroicon name="hero-plus" /> Add item
        </.action>
        <.action phx-click="reset" class="button ui-size-sm ui-alert">
          Reset
        </.action>
      </div>
      <.select
        id="patterns-dynamic"
        class="select"
        items={Corex.List.new(@items)}
        value={@value}
        on_value_change="value_changed"
      >
        <:label>Country</:label>
        <:trigger>
          <.heroicon name="hero-chevron-down" class="icon" />
        </:trigger>
      </.select>
    </div>
    """
  end
end