Patterns

    <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>
  <.listbox class="listbox" items={Corex.List.new(@items)}>
    <:label>Choose an item</:label>
    <:empty>No items</:empty>
    <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
  </.listbox>
</div>

  

    defmodule MyAppWeb.ListboxDynamicDemoLive do
  use MyAppWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    initial = [
      %{value: "1", label: "Apple"},
      %{value: "2", label: "Banana"},
      %{value: "3", label: "Cherry"}
    ]

    {:ok,
     socket
     |> assign(:items, initial)
     |> assign(:next_id, 4)}
  end

  @impl true
  def handle_event("add_item", _params, socket) do
    id = to_string(socket.assigns.next_id)
    item = %{value: id, label: "Item " <> 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: "1", label: "Apple"},
      %{value: "2", label: "Banana"},
      %{value: "3", label: "Cherry"}
    ]

    {:noreply,
     socket
     |> assign(:items, initial)
     |> assign(:next_id, 4)}
  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>
        <.listbox id="patterns-dynamic" class="listbox" items={Corex.List.new(@items)}>
          <:label>Choose an item</:label>
          <:empty>No items</:empty>
          <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
        </.listbox>
      </div>
    """
  end
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_to_group"
      phx-value-group="Europe"
      class="button ui-size-sm ui-accent"
    >
      <.heroicon name="hero-plus" /> Add to Europe
    </.action>
    <.action
      phx-click="add_to_group"
      phx-value-group="Asia"
      class="button ui-size-sm ui-accent"
    >
      <.heroicon name="hero-plus" /> Add to Asia
    </.action>
    <.action phx-click="reset_grouped" class="button ui-size-sm ui-alert">
      Reset
    </.action>
  </div>
  <.listbox
    class="listbox"
    items={Corex.List.new(@grouped_items)}
  >
    <:label>Choose a country</:label>
    <:empty>No items</:empty>
    <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
  </.listbox>
</div>

  

    defmodule MyAppWeb.ListboxDynamicGroupedDemoLive do
  use MyAppWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    initial = [
      %{value: "g1", label: "France", group: "Europe"},
      %{value: "g2", label: "Japan", group: "Asia"},
      %{value: "g3", label: "Germany", group: "Europe"}
    ]

    {:ok,
     socket
     |> assign(:grouped_items, initial)
     |> assign(:next_grouped_id, 4)}
  end

  @impl true
  def handle_event("add_to_group", %{"group" => group}, socket) do
    n = socket.assigns.next_grouped_id
    id = "g" <> Integer.to_string(n)
    item = %{value: id, label: "Item " <> Integer.to_string(n), group: group}

    {:noreply,
     socket
     |> assign(:grouped_items, socket.assigns.grouped_items ++ [item])
     |> assign(:next_grouped_id, n + 1)}
  end

  @impl true
  def handle_event("reset_grouped", _params, socket) do
    initial = [
      %{value: "g1", label: "France", group: "Europe"},
      %{value: "g2", label: "Japan", group: "Asia"},
      %{value: "g3", label: "Germany", group: "Europe"}
    ]

    {:noreply,
     socket
     |> assign(:grouped_items, initial)
     |> assign(:next_grouped_id, 4)}
  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_to_group"
            phx-value-group="Europe"
            class="button ui-size-sm ui-accent"
          >
            <.heroicon name="hero-plus" /> Add to Europe
          </.action>
          <.action
            phx-click="add_to_group"
            phx-value-group="Asia"
            class="button ui-size-sm ui-accent"
          >
            <.heroicon name="hero-plus" /> Add to Asia
          </.action>
          <.action phx-click="reset_grouped" class="button ui-size-sm ui-alert">
            Reset
          </.action>
        </div>
        <.listbox
          id="patterns-dynamic-grouped"
          class="listbox"
          items={Corex.List.new(@grouped_items)}
        >
          <:label>Choose a country</:label>
          <:empty>No items</:empty>
          <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
        </.listbox>
      </div>
    """
  end
end

  

    <.listbox
  class="listbox"
  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"}
    ])
  }
  selection_mode="multiple"
  controlled
  value={@listbox_controlled_value}
  on_value_change="listbox_patterns_controlled_value"
>
  <:label>Choose countries</:label>
  <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<div class="w-full min-w-0">
  <p class="text-sm text-ink-muted font-mono break-all text-center">
    value: {inspect(@listbox_controlled_value)}
  </p>
</div>

  

    defmodule MyAppWeb.ListboxControlledDemoLive do
  use MyAppWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    {:ok, assign(socket, :listbox_controlled_value, ["fra", "bel"])}
  end

  @impl true
  def handle_event("listbox_patterns_controlled_value", %{"value" => value}, socket)
      when is_list(value) do
    {:noreply, assign(socket, :listbox_controlled_value, value)}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <div class="flex flex-col gap-space w-full items-center">
      <div class="w-full max-w-md">
        <.listbox
          id="listbox-patterns-controlled-field"
          class="listbox"
          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"}
            ])
          }
          selection_mode="multiple"
          controlled
          value={@listbox_controlled_value}
          on_value_change="listbox_patterns_controlled_value"
        >
          <:label>Choose countries</:label>
          <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
        </.listbox>
      </div>
      <div class="w-full min-w-0" id="listbox-patterns-controlled-state">
        <p class="text-sm text-ink-muted font-mono break-all text-center">
          value: {inspect(@listbox_controlled_value)}
        </p>
      </div>
    </div>
    """
  end
end