Toggle Group

API

set_value via LiveView JS, DOM events on the hook root, or server push.

Set Value (Client Binding)

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click={Corex.ToggleGroup.set_value("toggle-group-api-cb", ["lorem"])} class="button ui-size-sm">Lorem</.action>
  <.action phx-click={Corex.ToggleGroup.set_value("toggle-group-api-cb", ["duis"])} class="button ui-size-sm">Duis</.action>
  <.action phx-click={Corex.ToggleGroup.set_value("toggle-group-api-cb", ["donec"])} class="button ui-size-sm">Donec</.action>
  <.action phx-click={Corex.ToggleGroup.set_value("toggle-group-api-cb", [])} class="button ui-size-sm">Clear</.action>
</div>
<.toggle_group id="toggle-group-api-cb" class="toggle-group" multiple value={["lorem"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>

Set Value (Client JS)

    <div class="flex flex-wrap items-center gap-space">
  <.action
    class="button ui-size-sm"
    phx-click={
      Phoenix.LiveView.JS.dispatch("corex:toggle-group:set-value",
        to: "#toggle-group-api-cjs",
        detail: %{value: ["lorem"]},
        bubbles: false
      )
    }
  >
    Lorem
  </.action>
  <.action
    class="button ui-size-sm"
    phx-click={
      Phoenix.LiveView.JS.dispatch("corex:toggle-group:set-value",
        to: "#toggle-group-api-cjs",
        detail: %{value: ["duis"]},
        bubbles: false
      )
    }
  >
    Duis
  </.action>
  <.action
    class="button ui-size-sm"
    phx-click={
      Phoenix.LiveView.JS.dispatch("corex:toggle-group:set-value",
        to: "#toggle-group-api-cjs",
        detail: %{value: ["donec"]},
        bubbles: false
      )
    }
  >
    Donec
  </.action>
</div>
<.toggle_group id="toggle-group-api-cjs" class="toggle-group" multiple value={["donec"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>

    const el = document.getElementById("toggle-group-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:toggle-group:set-value", { bubbles: false, detail: { value: ["donec"] } })
);

    const el: HTMLElement | null = document.getElementById("toggle-group-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:toggle-group:set-value", {
    bubbles: false,
    detail: { value: ["donec"] },
  })
);

Set Value (Server)

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click="tg_api_lorem" class="button ui-size-sm">Lorem</.action>
  <.action phx-click="tg_api_duis" class="button ui-size-sm">Duis</.action>
  <.action phx-click="tg_api_donec" class="button ui-size-sm">Donec</.action>
  <.action phx-click="tg_api_clear" class="button ui-size-sm">Clear</.action>
</div>
<.toggle_group id="toggle-group-api-srv" class="toggle-group" multiple value={["lorem"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>

    def handle_event("tg_api_lorem", _params, socket) do
  {:noreply, Corex.ToggleGroup.set_value(socket, "toggle-group-api-srv", ["lorem"])}
end

def handle_event("tg_api_duis", _params, socket) do
  {:noreply, Corex.ToggleGroup.set_value(socket, "toggle-group-api-srv", ["duis"])}
end

def handle_event("tg_api_donec", _params, socket) do
  {:noreply, Corex.ToggleGroup.set_value(socket, "toggle-group-api-srv", ["donec"])}
end

def handle_event("tg_api_clear", _params, socket) do
  {:noreply, Corex.ToggleGroup.set_value(socket, "toggle-group-api-srv", [])}
end