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

<%# locals: (category:, categories:) %>

<div data-controller="color-avatar">
  <%= styled_form_with model: category, class: "space-y-4", data: { turbo_frame: :_top } do |f| %>
    <section class="space-y-4">
      <div class="w-fit m-auto">
        <%= render partial: "shared/color_avatar", locals: { name: category.name, color: category.color } %>
      </div>

      <div class="flex gap-2 items-center justify-center">
        <% Category::COLORS.each do |color| %>
          <label class="relative">
            <%= f.radio_button :color, color, class: "sr-only peer", data: { action: "change->color-avatar#handleColorChange" } %>
            <div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500" style="background-color: <%= color %>"></div>
          </label>
        <% end %>
      </div>

      <% if category.errors.any? %>
        <%= render "shared/form_errors", model: category %>
      <% end %>

      <div class="space-y-2">
        <%= f.text_field :name, placeholder: t(".placeholder"), required: true, autofocus: true, label: "Name", data: { color_avatar_target: "name" } %>
        <%= f.select :parent_id, categories.pluck(:name, :id), { include_blank: "(unassigned)", label: "Parent category (optional)" } %>
      </div>
    </section>

    <section>
      <%= hidden_field_tag :transaction_id, params[:transaction_id] %>
      <%= f.submit %>
    </section>
  <% end %>
</div>