Phoenix implementation of Zag.js Toggle Group.

Anatomy

Minimal

<.toggle_group class="toggle-group">
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>

With indicator

<.toggle_group class="toggle-group">
  <:item value="bold">
    <.heroicon name="hero-bold" />
    Bold
  </:item>
</.toggle_group>

<.toggle_group class="toggle-group">
  <:item value="bold" aria_label="Bold">
    <.heroicon name="hero-bold" />
    <span class="sr-only">Bold</span>
  </:item>
</.toggle_group>

Single selection

Set multiple={false} so only one item can be selected at a time.

<.toggle_group
  class="toggle-group"
  multiple={false}
  value={["duis"]}
>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>

API

Requires a stable id on <.toggle_group>.

Events

Pick an event name and pass it to on_* on <.toggle_group>.

Server events

on_value_change

<.toggle_group
  class="toggle-group"
  on_value_change="toggle_group_changed"
  multiple
>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>

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

Client events

on_value_change_client

<.toggle_group
  id="toggle-group-events-client"
  class="toggle-group"
  on_value_change_client="toggle-group-changed"
  multiple
>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>

const el = document.getElementById("toggle-group-events-client");
el?.addEventListener("toggle-group-changed", (event) => console.log(event.detail));

Patterns

Controlled

For server-owned selection, set controlled, bind value, and handle on_value_change in LiveView.

<.toggle_group
  class="toggle-group"
  value={@value}
  multiple
  controlled
  on_value_change="toggle_group_pattern"
>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>

def mount(_params, _session, socket) do
  {:ok, assign(socket, :value, ["lorem"])}
end

def handle_event("toggle_group_pattern", %{"value" => v}, socket) do
  {:noreply, assign(socket, :value, v || [])}
end

Style

Target parts with data-scope and data-part, or use Corex Design: import tokens and toggle-group.css, then set class="toggle-group" on <.toggle_group>.

[data-scope="toggle-group"][data-part="root"] {}
[data-scope="toggle-group"][data-part="item"] {}

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/toggle-group.css";

Stack modifiers on the host (class on <.toggle_group>).

Color

Size

Rounded