Checkbox · Pattern
Common ways to structure Checkbox state and data flows.
Async
<.async_result :let={checkbox} assign={@checkbox}>
<:loading>
<.checkbox_skeleton class="checkbox" />
</:loading>
<.checkbox
class="checkbox"
checked={checkbox.checked}
>
<:label>Accept terms</:label>
<:indicator>
<.heroicon name="hero-check" />
</:indicator>
<:indeterminate>
<.heroicon name="hero-minus" />
</:indeterminate>
</.checkbox>
</.async_result>
def mount(_params, _session, socket) do
{:ok,
socket
|> assign_async(:checkbox, fn ->
Process.sleep(1000)
{:ok, %{checkbox: %{checked: true}}}
end)}
end
Controlled (LiveView)
<.checkbox
class="checkbox"
controlled
checked={@checked}
on_checked_change="patterns_controlled_changed"
>
<:label>Accept terms</:label>
<:indicator>
<.heroicon name="hero-check" />
</:indicator>
<:indeterminate>
<.heroicon name="hero-minus" />
</:indeterminate>
</.checkbox>
def mount(_params, _session, socket) do
{:ok, assign(socket, :checked, true)}
end
def handle_event("patterns_controlled_changed", %{"checked" => checked}, socket) do
{:noreply, assign(socket, :checked, checked)}
end