Radio Group · API

    <.action phx-click={Corex.RadioGroup.clear_value("radio-group-api-clear")} class="button button--sm">
  Clear
</.action>
<.radio_group
  name="rg-api-clear"
  class="radio-group"
  value="lorem"
  items={[
    %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
    %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
    %{value: "donec", label: "Donec condimentum ex mi"}
  ]}
>
  <:label>Pick</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>

  

    def handle_event("clear_choice", _params, socket) do
  {:noreply, Corex.RadioGroup.clear_value(socket, "radio-group-api-clear")}
end

  

    <.action phx-click={Corex.RadioGroup.focus("radio-group-api-focus")} class="button button--sm">
  Focus group
</.action>
<.radio_group
  name="rg-api-focus"
  class="radio-group"
  items={[
    %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
    %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
    %{value: "donec", label: "Donec condimentum ex mi"}
  ]}
>
  <:label>Pick</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>

  

    def handle_event("focus_choice", _params, socket) do
  {:noreply, Corex.RadioGroup.focus(socket, "radio-group-api-focus")}
end

  

    <.action phx-click={Corex.RadioGroup.set_value("radio-group-api-server", "duis")} class="button button--sm">
  Set Duis
</.action>
<.action phx-click={Corex.RadioGroup.set_value("radio-group-api-server", "donec")} class="button button--sm">
  Set Donec
</.action>
<.radio_group
  name="rg-api-server"
  class="radio-group"
  value="lorem"
  items={[
    %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
    %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
    %{value: "donec", label: "Donec condimentum ex mi"}
  ]}
>
  <:label>Pick</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>

  

    def handle_event("radio_group_api_set", %{"value" => value}, socket) do
  {:noreply, Corex.RadioGroup.set_value(socket, "radio-group-api-server", value)}
end

  

    <.radio_group
  name="rg-api-binding"
  class="radio-group"
  items={[
    %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
    %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
    %{value: "donec", label: "Donec condimentum ex mi"}
  ]}
  on_value_change="radio_group_api_binding"
>
  <:label>Pick</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>

  

    def handle_event("radio_group_api_binding", %{"id" => id, "value" => value}, socket) do
  {:noreply, socket}
end

  

    <.radio_group
  name="rg-api-client"
  class="radio-group"
  items={[
    %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
    %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
    %{value: "donec", label: "Donec condimentum ex mi"}
  ]}
  on_value_change_client="radio-group-api-changed"
>
  <:label>Pick</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>

  

    const el = document.getElementById("radio-group-api-client");
el?.addEventListener("radio-group-api-changed", (event) => console.log(event.detail));

  

    const el = document.getElementById("radio-group-api-client");
el?.addEventListener("radio-group-api-changed", (event: Event) => {
  console.log((event as CustomEvent<{ id?: string; value?: string | null }>).detail);
});

  

    <.radio_group
  name="rg-api-controlled"
  class="radio-group"
  items={[
    %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
    %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
    %{value: "donec", label: "Donec condimentum ex mi"}
  ]}
  value={@value}
  controlled
  on_value_change="radio_group_api_controlled"
>
  <:label>Pick</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>

  

    # With controlled={true}, pass value={...} and update it from handle_event.
# The hook reapplies value on LiveView patches (see updated() in the RadioGroup hook).
def handle_event("radio_group_api_controlled", %{"value" => v}, socket) do
  {:noreply, assign(socket, :value, v)}
end