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

<%= styled_form_with model: category, data: { turbo: false } do |form| %>
  <div class="flex flex-col space-y-4 w-96" data-controller="color-select" data-color-select-selection-value="<%= category.color %>">
    <fieldset class="relative">
      <span data-color-select-target="decoration" class="pointer-events-none absolute inset-y-3.5 left-3 flex items-center pl-1 block w-1 rounded-lg"></span>
      <%= form.text_field :name,
            value: category.name,
            autofocus: "",
            required: true,
            placeholder: "Enter Category name",
            class: "rounded-lg w-full focus:ring-black focus:border-transparent placeholder:text-gray-500 pl-6" %>
    </fieldset>

    <fieldset>
      <%= form.hidden_field :color, data: { color_select_target: "input" } %>

      <ul role="radiogroup" class="flex justify-between items-center py-2">
        <% Category::COLORS.each do |color| %>
          <li tabindex="0"
              role="radio"
              data-action="click->color-select#select keydown.enter->color-select#select keydown.space->color-select#select"
              data-value="<%= color %>"
              class="flex shrink-0 justify-center items-center w-5 h-5 cursor-pointer hover:bg-gray-200 rounded-full">
          </li>
        <% end %>
      </ul>
    </fieldset>

    <section>
      <%= hidden_field_tag :transaction_id, params[:transaction_id] %>

      <% if category.persisted? %>
        <%= form.submit t(".update") %>
      <% else %>
        <%= form.submit t(".create") %>
      <% end %>
    </section>
  </div>
<% end %>