Corex · Elixir Phoenix Framework UI Library

Set value (Client binding)

Choose one

Lorem ipsum dolor sit amet Duis dictum gravida odio ac pharetra? Donec condimentum ex mi

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click={Corex.RadioGroup.set_value("radio-group-api-cb", "lorem")} class="button ui-size-sm">Lorem</.action>
  <.action phx-click={Corex.RadioGroup.set_value("radio-group-api-cb", "duis")} class="button ui-size-sm">Duis</.action>
  <.action phx-click={Corex.RadioGroup.set_value("radio-group-api-cb", "donec")} class="button ui-size-sm">Donec</.action>
  <.action phx-click={Corex.RadioGroup.clear_value("radio-group-api-cb")} class="button ui-size-sm">Clear</.action>
</div>
<.radio_group
  id="radio-group-api-cb"
  name="rg-api-cb"
  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>Choose one</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>

Set value (Client JS)

Choose one

Lorem ipsum dolor sit amet Duis dictum gravida odio ac pharetra? Donec condimentum ex mi

    <div class="flex flex-wrap items-center gap-space">
  <.action
    phx-click={JS.dispatch("corex:radio-group:set-value", to: "#radio-group-api-cjs", bubbles: false, detail: %{value: "lorem"})}
    class="button ui-size-sm"
  >
    Lorem
  </.action>
  <.action
    phx-click={JS.dispatch("corex:radio-group:set-value", to: "#radio-group-api-cjs", bubbles: false, detail: %{value: "duis"})}
    class="button ui-size-sm"
  >
    Duis
  </.action>
  <.action
    phx-click={JS.dispatch("corex:radio-group:set-value", to: "#radio-group-api-cjs", bubbles: false, detail: %{value: "donec"})}
    class="button ui-size-sm"
  >
    Donec
  </.action>
  <.action
    phx-click={JS.dispatch("corex:radio-group:clear-value", to: "#radio-group-api-cjs", bubbles: false)}
    class="button ui-size-sm"
  >
    Clear
  </.action>
</div>
<.radio_group
  id="radio-group-api-cjs"
  name="rg-api-cjs"
  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>Choose one</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>

    const el = document.getElementById("radio-group-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:radio-group:set-value", { bubbles: false, detail: { value: "lorem" } })
);
el?.dispatchEvent(
  new CustomEvent("corex:radio-group:clear-value", { bubbles: false })
);

    const el: HTMLElement | null = document.getElementById("radio-group-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:radio-group:set-value", { bubbles: false, detail: { value: "lorem" } })
);
el?.dispatchEvent(
  new CustomEvent("corex:radio-group:clear-value", { bubbles: false })
);

Set value (Server)

Choose one

Lorem ipsum dolor sit amet Duis dictum gravida odio ac pharetra? Donec condimentum ex mi

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click="radio_group_api_lorem" class="button ui-size-sm">Lorem</.action>
  <.action phx-click="radio_group_api_duis" class="button ui-size-sm">Duis</.action>
  <.action phx-click="radio_group_api_donec" class="button ui-size-sm">Donec</.action>
  <.action phx-click="radio_group_api_clear_server" class="button ui-size-sm">Clear</.action>
</div>
<.radio_group
  id="radio-group-api-srv"
  name="rg-api-srv"
  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>Choose one</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>

    def handle_event("radio_group_api_lorem", _params, socket) do
  {:noreply, Corex.RadioGroup.set_value(socket, "radio-group-api-srv", "lorem")}
end

def handle_event("radio_group_api_duis", _params, socket) do
  {:noreply, Corex.RadioGroup.set_value(socket, "radio-group-api-srv", "duis")}
end

def handle_event("radio_group_api_donec", _params, socket) do
  {:noreply, Corex.RadioGroup.set_value(socket, "radio-group-api-srv", "donec")}
end

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

Clear value

Choose one

Lorem ipsum dolor sit amet Duis dictum gravida odio ac pharetra? Donec condimentum ex mi

    <.action phx-click={Corex.RadioGroup.clear_value("radio-group-api-clear")} class="button ui-size-sm">
  Clear
</.action>
<.radio_group
  id="radio-group-api-clear"
  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>Choose one</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>

Focus

Choose one

Lorem ipsum dolor sit amet Duis dictum gravida odio ac pharetra? Donec condimentum ex mi

    <.action phx-click={Corex.RadioGroup.focus("radio-group-api-focus")} class="button ui-size-sm">
  Focus group
</.action>
<.radio_group
  id="radio-group-api-focus"
  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>Choose one</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>