Checkbox · Event

Subscribe to checked changes from LiveView or the client.

On Checked Change (Server)

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.checkbox
  class="checkbox"
  on_checked_change="checkbox_changed"
>
  <:label>Subscribe</:label>
  <:indicator>
    <.heroicon name="hero-check" />
  </:indicator>
</.checkbox>

    def handle_event("checkbox_changed", %{"id" => id, "checked" => checked} = params, socket) do
  IO.inspect(params, label: "checkbox_changed")
  {:noreply, socket}
end

On Checked Change (Client)

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.checkbox
  id="checkbox-on-checked-change-client"
  class="checkbox"
  on_checked_change_client="checkbox-changed"
>
  <:label>Subscribe</:label>
  <:indicator>
    <.heroicon name="hero-check" />
  </:indicator>
</.checkbox>

    const el = document.getElementById("checkbox-on-checked-change-client");
el?.addEventListener("checkbox-changed", (event) => console.log(event.detail));

    const el = document.getElementById("checkbox-on-checked-change-client");
el?.addEventListener("checkbox-changed", (event: Event) =>
  console.log((event as CustomEvent<{ id: string; checked: boolean }>).detail)
);