Add color input

app/assets/stylesheets/administrate/base/_forms.scss

@@ -92,6 +92,23 @@ textarea {
   width: 100%;
 }
 
+[type="color"] {
+  padding: 0 0.5em;
+}
+
+.color-example {
+  display: flex;
+  align-items: center;
+
+  span {
+    width: 1em;
+    height: 1em;
+    line-height: 1.5em;
+    display: inline-block;
+    margin-right: 0.5em;
+  }
+}
+
 select {
   width: 100%;
 }

app/views/fields/color/_form.html.erb

@@ -0,0 +1,6 @@
+<div class="field-unit__label">
+  <%= f.label field.attribute %>
+</div>
+<div class="field-unit__field">
+  <%= f.color_field field.attribute %>
+</div>

app/views/fields/color/_index.html.erb

@@ -0,0 +1,4 @@
+<div class="color-example">
+  <span style="background-color: <%= field.to_s %>"></span>
+  <%= field.to_s %>
+</div>

app/views/fields/color/_show.html.erb

@@ -0,0 +1,4 @@
+<div class="color-example">
+  <span style="background-color: <%= field.to_s %>"></span>
+  <%= field.to_s %>
+</div>

lib/administrate/base_dashboard.rb

@@ -14,6 +14,7 @@
 require "administrate/field/time"
 require "administrate/field/url"
 require "administrate/field/password"
+require "administrate/field/color"
 
 module Administrate
   class BaseDashboard

lib/administrate/field/color.rb

@@ -0,0 +1,11 @@
+require_relative "base"
+
+module Administrate
+  module Field
+    class Color < Base
+      def to_s
+        data
+      end
+    end
+  end
+end

spec/example_app/app/dashboards/customer_dashboard.rb

@@ -18,7 +18,8 @@ class CustomerDashboard < Administrate::BaseDashboard
       include_blank: true
     ),
     example_time: Field::Time,
-    password: Field::Password
+    password: Field::Password,
+    favourite_color: Field::Color
   }
 
   COLLECTION_ATTRIBUTES = [
@@ -27,7 +28,8 @@ class CustomerDashboard < Administrate::BaseDashboard
     :email_subscriber,
     :orders,
     :territory,
-    :example_time
+    :example_time,
+    :favourite_color
   ]
 
   SHOW_PAGE_ATTRIBUTES = ATTRIBUTE_TYPES.keys - [:name]
@@ -39,7 +41,8 @@ class CustomerDashboard < Administrate::BaseDashboard
     :kind,
     :territory,
     :example_time,
-    :password
+    :password,
+    :favourite_color
   ].freeze
 
   COLLECTION_FILTERS = {

spec/example_app/db/migrate/20250403192516_add_favourite_color.rb

@@ -0,0 +1,5 @@
+class AddFavouriteColor < ActiveRecord::Migration[8.0]
+  def change
+    add_column :customers, :favourite_color, :string
+  end
+end

spec/example_app/db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[8.0].define(version: 2024_11_13_130741) do
+ActiveRecord::Schema[8.0].define(version: 2025_04_03_192516) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_catalog.plpgsql"
 
@@ -94,6 +94,7 @@
     t.time "example_time"
     t.string "password"
     t.boolean "hidden", default: false, null: false
+    t.string "favourite_color"
   end
 
   create_table "line_items", id: :serial, force: :cascade do |t|

spec/lib/fields/color_spec.rb

@@ -0,0 +1,14 @@
+require "rails_helper"
+require "administrate/field/color"
+
+describe Administrate::Field::Color do
+  describe "#color" do
+    it "displays the color" do
+      field = described_class.new(:color, "#FF5733", :show)
+
+      prefixes = field.partial_prefixes
+
+      expect(prefixes).to eq(["fields/color", "fields/base"])
+    end
+  end
+end