Checkbox · API
Programmatically set the checked state from the server or client bindings.
Hex doc
Phoenix
Set checked (Client Binding)
<div class="layout__row">
<.action phx-click={Corex.Checkbox.set_checked("checkbox-api-bind", true)} class="button button--sm">
Set checked
</.action>
<.action phx-click={Corex.Checkbox.set_checked("checkbox-api-bind", false)} class="button button--sm">
Set unchecked
</.action>
<.action phx-click={Corex.Checkbox.toggle_checked("checkbox-api-bind")} class="button button--sm">
Toggle
</.action>
</div>
<.checkbox id="checkbox-api-bind" class="checkbox">
<:label>Terms</:label>
<:indicator>
<.heroicon name="hero-check" />
</:indicator>
<:indeterminate>
<.heroicon name="hero-minus" />
</:indeterminate>
</.checkbox>
Set checked (Client JS)
<div class="flex flex-wrap gap-2 mb-4">
<button
type="button"
class="button button--sm"
onclick="document.getElementById('checkbox-api-dispatch')?.dispatchEvent(new CustomEvent('corex:checkbox:set-checked', { bubbles: false, detail: { checked: true } }))"
>
Set checked
</button>
<button
type="button"
class="button button--sm"
onclick="document.getElementById('checkbox-api-dispatch')?.dispatchEvent(new CustomEvent('corex:checkbox:set-checked', { bubbles: false, detail: { checked: false } }))"
>
Set unchecked
</button>
<button
type="button"
class="button button--sm"
onclick="document.getElementById('checkbox-api-dispatch')?.dispatchEvent(new CustomEvent('corex:checkbox:toggle-checked', { bubbles: false }))"
>
Toggle
</button>
</div>
<.checkbox id="checkbox-api-dispatch" class="checkbox">
<:label>Terms</:label>
<:indicator>
<.heroicon name="hero-check" />
</:indicator>
<:indeterminate>
<.heroicon name="hero-minus" />
</:indeterminate>
</.checkbox>
const el = document.getElementById("checkbox-api-dispatch");
el?.dispatchEvent(
new CustomEvent("corex:checkbox:set-checked", { bubbles: false, detail: { checked: true } })
);
el?.dispatchEvent(
new CustomEvent("corex:checkbox:set-checked", { bubbles: false, detail: { checked: false } })
);
el?.dispatchEvent(new CustomEvent("corex:checkbox:toggle-checked", { bubbles: false }));
const el: HTMLElement | null = document.getElementById("checkbox-api-dispatch");
el?.dispatchEvent(
new CustomEvent("corex:checkbox:set-checked", { bubbles: false, detail: { checked: true } })
);
el?.dispatchEvent(
new CustomEvent("corex:checkbox:set-checked", { bubbles: false, detail: { checked: false } })
);
el?.dispatchEvent(new CustomEvent("corex:checkbox:toggle-checked", { bubbles: false }));
Set checked (Server)
def handle_event("check", %{"id" => id}, socket) do
{:noreply, Corex.Checkbox.set_checked(socket, id, true)}
end
def handle_event("uncheck", %{"id" => id}, socket) do
{:noreply, Corex.Checkbox.set_checked(socket, id, false)}
end
def handle_event("toggle", %{"id" => id}, socket) do
{:noreply, Corex.Checkbox.toggle_checked(socket, id)}
end