مربع الاختيار · النمط

    <.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

  

    <.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