Toggle group for Phoenix LiveView. Behavior follows 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/corex.css";

Stack modifiers on the host (class on <.toggle_group>). Combine axes, for example toggle-group ui-accent ui-size-lg.

Axes: Semantic (ui-accent, ui-brand, ui-alert, ui-info, ui-success), Size (ui-size-sm … ui-size-xl), Radius (ui-rounded-*). No variant axis. See the modifier guide.

Semantic modifiers set palette variables for the filled selected state. Idle items stay neutral. Selected items always fill.

Semantic

Palette variables for the filled selected state.

Size

Rounded