Maybe/app/views/merchants/_form.html.erb

<% is_editing = @merchant.id.present? %>
<div data-controller="merchant-avatar">
  <%= styled_form_with model: @merchant, url: is_editing ? merchant_path(@merchant) : merchants_path, method: is_editing ? :patch : :post, scope: :merchant, class: "space-y-4", data: { turbo: false } do |f| %>
    <section class="space-y-4">
      <div class="w-fit m-auto">
        <%= render partial: "merchants/avatar", locals: { merchant: } %>
      </div>
      <div data-controller="select" data-select-active-class="bg-gray-200" data-select-selected-value="<%= @merchant&.color || Merchant::COLORS[0] %>">
        <%= f.hidden_field :color, data: { select_target: "input", merchant_avatar_target: "color" } %>
        <ul data-select-target="list" class="flex gap-2 items-center">
          <% Merchant::COLORS.each do |color| %>
            <li tabindex="0" data-select-target="option" data-action="click->select#selectOption" data-value="<%= color %>" class="flex shrink-0 justify-center items-center w-6 h-6 cursor-pointer hover:bg-gray-200 rounded-full">
              <div style="background-color: <%= color %>" class="shrink-0 w-4 h-4 rounded-full"></div>
            </li>
          <% end %>
        </ul>
      </div>
      <div class="relative flex items-center border border-gray-200 rounded-lg">
        <%= f.text_field :name, placeholder: t(".name_placeholder"), class: "text-sm font-normal placeholder:text-gray-500 h-10 relative pl-3 w-full border-none rounded-lg", required: true, data: { merchant_avatar_target: "name" } %>
      </div>
    </section>

    <section>
      <%= f.submit(is_editing ? t(".submit_edit") : t(".submit_create")) %>
    </section>
  <% end %>
</div>