I’m using a custom element for duration selection. It has a few buttons that modify the value. When I inspect the params from the phx-submit event, there is no value included from the custom element. I want it to be treated as a standard text input with an integer value. How can I get its value included in the submission?

Value from form-associated custom element not being included in form params on submit

Here is the code from the render function of the live component I created that wraps the custom element:

  def render(assigns) do
    ~H"""
    <div id={@id} class="flex items-center gap-4">
      <duration-input name="duration" value={@minutes}></duration-input>
      <TimeBoxWeb.Icons.pipe class="h-5 stroke-shady-white/40" />
      <fieldset class="flex items-center gap-2">
        <%= for {name, value} <- durations() do %>
          <button
            type="button"
            class="option"
            phx-click="set_duration"
            phx-value-minutes={value}
            phx-target={@myself}
            tabindex="-1"
          >
            <%= name %>
          </button>
        <% end %>
      </fieldset>
    </div>
    """
  end