Toggle button for Phoenix LiveView. Behavior follows Zag.js Toggle.

Anatomy

Minimal

<.toggle class="toggle">
  lorem
</.toggle>

With indicator

<.toggle class="toggle">
  <:indicator><.heroicon name="hero-bold" /></:indicator>
  Bold
</.toggle>

<.toggle class="toggle">
  <:indicator><.heroicon name="hero-bold" /></:indicator>
  <span class="sr-only">Bold</span>
</.toggle>

Dual label

Set data-toggle-dual-label on the host to swap visible label text when pressed. Use a second <span data-pressed> for the on-state label.

<.toggle class="toggle" data-toggle-dual-label>
  <span>lorem</span>
  <span data-pressed>donec</span>
</.toggle>

API

Requires a stable id on <.toggle>.

Events

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

Server events

on_pressed_change

<.toggle
  class="toggle"
  controlled
  pressed={false}
  on_pressed_change="toggle_pressed_changed"
>
  lorem
</.toggle>

def handle_event("toggle_pressed_changed", %{"pressed" => pressed}, socket) do
  p = pressed == true or pressed == "true"
  {:noreply, assign(socket, :pressed, p)}
end

Client events

on_pressed_change_client

<.toggle
  id="toggle-on-pressed-change-client"
  class="toggle"
  on_pressed_change_client="toggle-client-changed"
>
  lorem
</.toggle>

const el = document.getElementById("toggle-on-pressed-change-client");
el?.addEventListener("toggle-client-changed", (e) => console.log(e.detail));

Patterns

Controlled

For server-owned pressed state, set controlled, bind pressed, and handle on_pressed_change in LiveView.

<.toggle
  class="toggle"
  controlled
  pressed={@pressed}
  on_pressed_change="toggle_patterns_pressed"
>
  lorem
</.toggle>

def mount(_params, _session, socket) do
  {:ok, assign(socket, :pressed, false)}
end

def handle_event("toggle_patterns_pressed", %{"pressed" => pressed}, socket) do
  {:noreply, assign(socket, :pressed, pressed == true or pressed == "true")}
end

Style

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

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

@import "../corex/corex.css";

Stack modifiers on the host (class on <.toggle>). Combine axes, for example toggle 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 on state. Off stays neutral. On always fills (--ctl-fill, or ink when no semantic role is set).

Semantic

Palette variables for the filled on state.

Size

Rounded