مربع الاختيار · واجهة برمجية

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

  

    <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 }));

  

    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